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

2014/10/23

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

最新の更新情報は、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つです!