jQuery でセレクトボックスのプルダウン項目(option 要素)を追加/削除する方法

更新日: 公開日:2014/10/23
jQueryでセレクトボックスの操作

フォームオブジェクトの中でも、セレクトボックスの操作は少し特殊です。記述方法を覚えてしまえば問題ないのですが、同じようなミスをして調べる機会が多いのもセレクトボックスの特徴ではないでしょうか。

jQuery を使えば、様々な需要に合った操作ができるようになります。ここではプルダウン項目の追加・削除について触れますが、基本となるセレクトボックス操作の知識は必要不可欠なので、ぜひ次の記事も一緒に確認していただければと思います。

以下、サンプルプログラムでは id 属性「select_test」を持つセレクトボックスを用いて解説していきます。

<select id="select_test">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
  <option value="4">選択肢4</option>
</select>

プルダウン項目(option 要素)を追加する方法

サンプルプログラムでは value 値が 999 となるプルダウン「選択肢999」を追加する例を紹介します。

.append() を用いるので、セレクトボックスの末尾に追加されます。もし、プルダウンの先頭に追加したい場合は .append() ではなく .prepend() をご利用ください。

セレクトボックスにプルダウン項目を追加
// ベタ書きしたタグを追加する場合
$("#select_test").append("<option value='999'>選択肢999</option>");
 
// value値、テキストを指定して生成
$("#select_test").append($("<option>").val("999").text("選択肢999"));

どちらも option タグを生成して html 上に出力する処理を行っています。結果的にはどちらも同じ結果になります。ただ変数を用いて値を設定するような場合は、2つ目の記述方法で書いたほうが読みやすいプログラムになります。

また、この処理を応用して、同じ value 値を持つプルダウンが追加されないように制御することも可能です。

プルダウン項目追加の応用テクニック
//[応用] 追加された要素が既に存在している場合は追加しない
$("#select_test").append( function(){
  if($("#select_test option[value='999']").length == 0) {
    return $("<option>").val("999").text("選択肢999");
  }
});

セレクトボックスへのプルダウン項目追加のサンプル

ボタンを押したあと、プルダウンに値が追加されたことを確認してください。

【応用】指定した位置にプルダウンを追加する方法

プルダウンの option 要素の追加は、先頭や末尾だけでなく位置を指定して追加することもできます。

  • 末尾に追加: .append() を用いる
  • 先頭に追加: .prepend() を用いる
  • 指定位置に追加: 追加位置の option 要素を指定する

次のサンプルプログラムでは value 値が 888 となるプルダウン「選択肢888」を「選択肢2」の次に追加する例を紹介します。

位置指定によるプルダウン項目の追加
// value値が2の要素の後ろに追加する場合
$("#select_test option[value='2']").after($("<option>").val("888").text("選択肢888"));
 
//[応用] 追加された要素が既に存在している場合は追加しない
$("#select_test option[value='2']").after( function(){
  if($("#select_test option[value='888']").length == 0) {
    return $("<option>").val("888").text("選択肢888");
  }
});

option[value=”値”] と記述することで、セレクトボックス内の特定の option 要素を指定することができます。

サンプルでは .after() を用いて指定した要素の後ろに追加しています。もし指定要素の前に追加したい場合は .before() を使用してください。

セレクトボックスの指定位置へプルダウン項目を追加するサンプル

ボタン押下前後でプルダウンの内容を確認してください。指定した位置にプルダウンが追加されたことが分かります。

プルダウン項目(option 要素)を削除する方法

選択肢そのものを消してしまう方法は2つあります。

  • option の value 値を指定して削除
  • プルダウンの表示テキストを指定して削除

フォームオブジェクトの操作としては value 値を用いる方法が一般的です。ただ場合によっては、表示テキストを指定して削除する方法を知っておくと便利なこともあるので、これを機械に覚えてください。

プルダウン項目の削除
// value 値を指定して option 要素を削除
$("#select_test option[value='2']").remove();
 
// プルダウン表示テキストが「選択肢2」の option 要素を削除
$("#select_test option").each( function(){
  if($(this).text() == "選択肢2") {
    $(this).remove();
  }
});

テキストで判断する場合は .each() を使ったループ処理を行います。処理コストが高くなる(処理時間が掛かる)ので、明確な理由がなければ value 値で判断してください。

プルダウン項目(option 要素)削除のサンプル

ここでは「選択肢2」のプルダウンが削除されます。

以上、jQuery でセレクトボックスのプルダウン項目を追加/削除する方法の紹介でした。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。