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

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

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

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

以下、サンプルプログラムでは 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>

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

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

セレクトボックスの value 値を取得
$("#get_button").click( function(){
  var selectVal = $("#select_test").val();
  alert(selectVal);
});

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

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

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

value 値からプルダウンを選択(option を選択)

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

value 値からプルダウン選択
$("#set_button").click( function(){
  // value値が2のデータを選択
  $("#select_test").val("2");
});

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

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

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

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

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

プルダウンのテキストを取得
$("#get_button").click( function(){
  var selectVal = $("#select_test option:selected").text();
  alert(selectVal);
});

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

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

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

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

jQueryでセレクトボックスの操作
jQuery でセレクトボックスのプルダウン項目(option 要素)を追加/削除する方法
フォームオブジェクトの中でも、セレクトボックスの操作は少し特殊です。記述方法を覚えてしまえば問題ないのですが、同じようなミスをして調べる機会が多いのもセレクトボックス...

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

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。