jQueryでselectタグの値やテキストを取得する

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでセレクトボックスで選択したvalueやテキスト、option要素全部を取得したりと、セレクトボックスでの取得方法をご紹介します。

multipleのセレクトボックスでの複数の値に対応した方法も併せてお伝えします。

選択した値を取得

セレクトボックスで選択したvalue値やテキストを取得する方法です。

選択したvalue値を取得

まずはセレクトボックスのvalue値を取得します。

value値はHTMLには表示されずソースで確認することができますが、実際のデータはvalue値を元に判定しますね。

HTML

jQuery

結果(動作サンプル)

ボタンをクリックしてみてください。



 

valueに設定していたローマ字の都市名が表示されたかと思います。

以下で取得できます。

$( select要素 ).val();

option要素は指定せず、select要素のみで取得できるので便利ですね。

出力する際のtext()は以下の記事で解説しています。

参考:text() でHTML要素にテキストを追加

選択したテキストを取得

次は、セレクトボックスで選択したテキストを取得します。

今度はHTMLに表示されているテキストです。

HTML

jQuery

結果(動作サンプル)

ボタンをクリックしてみてください。



 

HTMLで実際に表示されている都市名が表示されたかと思います。

以下で取得できます。

$( select要素 option:selected ).text();

先ほどとは違い、select要素の後に半角スペースを空けoption:selectedを付けないと取得できません。

先ほどもでてきたtext()で取得しています。

セレクトボックスの値を全て取得

セレクトボックスで選択していない値も含めた、全ての値を取得する方法をご紹介します。

テキストを全て取得する

HTML

jQuery

結果(動作サンプル)

ボタンをクリックしてみてください。



 

HTMLで実際に表示されている都市名が表示されたかと思います。

以下で取得できます。

$( select要素 ).text();

option:selectedを付けなければ全て表示されます。

ただ、全てのテキストが繋がって表示されたため、実用的ではありません。

値を1つずつ取得するためには、次に紹介する方法で試してみてください。

テキストを1つずつ区切りながら全て取得する

実際に使いやすいようにテキストを1つずつ区切りながら取得します。

jQuery

結果(コンソール)

今回はコンソールに結果を表示させます。

横浜
川崎
相模原

コンソールについては以下の記事で解説しています。

参考:コンソールログを使ったデバッグ方法

説明

以下のように動作しています。

①セレクトボックスの子要素を children() で全て取得

参考:children() で子要素を取得

②for文でoptionの数だけループ処理

参考:for文で繰り返し処理

③コンソールに1つずつ表示

①で取得したoption要素の値をeq(i)で順番を指定しながら表示させています。

iには順番を示す番号が格納されていますので、ループしながらeq(0)eq(1)…と進んでいきます。

eq()は以下のようになります。

  • eq(0) => 横浜
  • eq(1) => 川崎
  • eq(2) => 相模原

参考:jQueryのeq()で順番を指定する方法

全てのvalueを取得する場合

valueを全て取得する場合は、上記サンプル③のtext()val()に変えてやるだけでOKです。

複数選択のセレクトボックスを取得

複数選択できるセレクトボックスのvalueやテキストを取得する方法です。

選択したvalue値を取得

セレクトボックスに複数選択するmutipleを付け足しました。

それ以外のコードは、普通のセレクトボックスと変わりません。

HTML

jQuery

結果(動作サンプル)

ctrlを押しながら複数選択し(macはcommandを押しながら選択)、ボタンをクリックしてみてください。



 

1つだけ選択した場合は通常のセレクトボックスと変わりませんが、複数選択すると,(カンマ)区切りの配列で表示されるかと思います。

あとはeach()for()などで配列を処理すれば、複数の値も1つずつ取得することができます。

参考:jQueryのeach()でループ処理

選択したテキストを取得

テキストを複数取得する場合はeach()などでループ処理します。

HTML

jQuery

結果(動作サンプル)

ctrlを押しながら複数選択し(macはcommandを押しながら選択)、ボタンをクリックしてみてください。



 

先ほど同様、1つだけ選択した場合は通常のセレクトボックスと変わりませんが、複数選択すると,(カンマ)区切りの配列で表示されるかと思います。

説明

以下のように動作しています。

①配列の変数を宣言

[]は変数を配列の型にするため、配列を格納できるようになります。

②選択したoption要素をeachで1つずつループ処理

each()は指定した要素がなくなるまでループ処理を続けます。

③セレクトボックスで選択したテキストを1つずつ配列に格納

push()を使って、①で宣言した配列に1つずつ値を格納していきます。

push() の構文

格納先の変数 . push( 配列 );

参考:each()で複数の要素をループ処理

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*