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

2017/02/15 ,

select ボックスにおける基本的な動作のサンプルです。通常の Javascript では、value 値のみで取り扱われるケースが多いですが、option 内のテキスト情報も簡単に習得できるので、そちらも含め紹介します。

以下、サンプルプログラムでは具体的に id=”select_test” の属性を持つセレクトボックスの例で説明します。

value 値から option を選択(設定)

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

値選択のサンプル




実際にプルダウン値を変更して試してみてください。「選択肢2」が選択されます。

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

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

値取得のサンプル




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

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

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

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

値取得のサンプル




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

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

※ option 要素に関する操作は、こちらのエントリーを参照ください。

jQuery でセレクトボックスの option 要素を追加/削除する方法
フォームオブジェクトの処理で、意外と手こずるのが select 系の操作です。選択肢の構成変更をする上でも jQuery が有効に利用できるので、optin 要素の処...
PAGE TOP ↑