jQueryでセレクトボックスのvalue値／テキストを選択／設定／取得する方法

公開日： 2014/10/23 : 最終更新日：2014/11/19 基本 option, select

selectボックスにおける基本的な動作のサンプルです。通常のJavascriptでは、value値のみで取り扱われるケースが多いですが、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値からoptionを選択(設定)

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

$("#set_button").click( function(){

$("#select_test").val("2");

テキストボックスに値を設定するのと同様に .val() で設定するだけです。

値選択のサンプル

実際にプルダウン値を変更して試してみてください。

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

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

$("#get_button").click( function(){

var selectVal = $("#select_test").val();

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

値取得のサンプル

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

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

optionタグに設定されたvalue値だけではなく、optionタグの中のテキスト情報も取得することができます。

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

$("#get_button").click( function(){

var selectVal = $("#select_test option:selected").text();

セレクトボックスのオブジェクト内にある選択されたoption情報に対して、テキストを取得してあげればOKです。選択されている情報を示す為に「:selected」セレクタを利用している点がポイントになります。

値取得のサンプル

こちらもプルダウン値を変更すると、取得されるテキストが変わります。

以上、セレクトボックスの値選択、取得のサンプルでした。

※ option要素に関する操作は、こちらのエントリーを参照ください。
「jQueryでセレクトボックスのoption要素を追加／削除する方法」