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

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

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

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

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

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

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

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

セレクトボックスにプルダウン項目を追加

// ベタ書きしたタグを追加する場合
$("#select_test").append("<option value='999'>選択肢９９９</option>");
 
// value値、テキストを指定して生成
$("#select_test").append($("<option>").val("999").text("選択肢９９９"));

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

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

プルダウン項目追加の応用テクニック

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

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

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

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

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

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

位置指定によるプルダウン項目の追加

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

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

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

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

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

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

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

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

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

プルダウン項目の削除

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

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

プルダウン項目（option 要素）削除のサンプル

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

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