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

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

このブログの運営者

NJ

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