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

2014/10/23

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

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

jQuery でセレクトボックスを操作!value 値の取得や選択項目の指定、プルダウンテキストの取得方法
select ボックスに対する jQuery の操作をまとめてみました。JavaScript では value 値が取得・設定に特化することが多いですが、jQ...

以下、サンプルプログラムでは 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 でセレクトボックスのプルダウン項目を追加/削除する方法の紹介でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!