jQuery でセレクトボックスを操作！value 値の取得や選択項目の指定、プルダウンテキストの取得方法

select ボックスに対する jQuery の操作をまとめてみました。

JavaScript では value 値が取得・設定に特化することが多いですが、jQuery を使うことで option タグ内のテキスト（プルダウンに表示している文言）も簡単に取得することができます。

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

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

選択されたプルダウンの value 値を取得

まずは基本となる選択値を取得する方法です。

$("#get_button").click( function(){
  var selectVal = $("#select_test").val();
  alert(selectVal);
});

テキストボックスの値取得の方法と同様に .val() で取得できます。

プルダウン value 値を取得するサンプル

プルダウン値を変更すると、取得される value 値も変わります。

value 値からプルダウンを選択（option を選択）

続いて値から opstion 項目を選択する方法です。

$("#set_button").click( function(){
  // value値が2のデータを選択
  $("#select_test").val("2");
});

こちらもテキストボックスの操作と同様に .val() の引数を設定すれば選択されます。

value 値からプルダウンを選択するサンプル

どのプルダウンを選択していても、処理を実行すれば「選択肢２」が選ばれるようになります。

選択されたプルダウンのテキストを取得

セレクトボックスのデータ操作は value 値の取得と設定が基本になりますが、選択したプルダウンに表示されたテキスト（option タグの中にしたテキスト）を取得することもできます。

$("#get_button").click( function(){
  var selectVal = $("#select_test option:selected").text();
  alert(selectVal);
});

値を取得したいセレクトボックスの中にある選択されたプルダウンの要素は「option:selected」で取得することができます。あとはその要素内のテキストを取得するために .text() を利用します。

選択されたプルダウンのテキストを取得するサンプル

選択するプルダウンを変更すれば、取得されるテキストも変わります。

以上、jQuery でセレクトボックスのプルダウンを選択したり、値を取得する方法の紹介でした。なお、プルダウン項目を直接編集してしまう手順について別途紹介しているので、よろしければこちらも参考にしてください。

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

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