jQueryでセレクトボックスで選択したvalueやテキスト、option要素全部を取得したりと、セレクトボックスでの取得方法をご紹介します。
multipleのセレクトボックスでの複数の値に対応した方法も併せてお伝えします。
目次
選択した値を取得
セレクトボックスで選択したvalue値やテキストを取得する方法です。
選択したvalue値を取得
まずはセレクトボックスのvalue値を取得します。
value値はHTMLには表示されずソースで確認することができますが、実際のデータはvalue値を元に判定しますね。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div> <select id="kanagawa"> <option value="yokohama">横浜</option> <option value="kawasaki">川崎</option> <option value="sagamihara">相模原</option> </select> <div><button tydive="button">クリック！</button></div> <p></p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // セレクトボックスで選択したvalue値を変数に格納 var city = $('#kanagawa').val(); // p要素にvauleを出力 $('p').text(city); }); }); |
結果（動作サンプル）
ボタンをクリックしてみてください。
valueに設定していたローマ字の都市名が表示されたかと思います。
以下で取得できます。
$( select要素 ).val();
option要素は指定せず、select要素のみで取得できるので便利ですね。
出力する際のtext()は以下の記事で解説しています。
選択したテキストを取得
次は、セレクトボックスで選択したテキストを取得します。
今度はHTMLに表示されているテキストです。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div> <select id="kanagawa"> <option value="yokohama">横浜</option> <option value="kawasaki">川崎</option> <option value="sagamihara">相模原</option> </select> <div><button tydive="button">クリック！</button></div> <p></p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // セレクトボックスで選択したテキストを変数に格納 var city = $('#kanagawa option:selected').text(); // p要素にテキストを出力 $('p').text(city); }); }); |
結果（動作サンプル）
ボタンをクリックしてみてください。
HTMLで実際に表示されている都市名が表示されたかと思います。
以下で取得できます。
$( select要素 option:selected ).text();
先ほどとは違い、select要素の後に半角スペースを空けoption:selectedを付けないと取得できません。
先ほどもでてきたtext()で取得しています。
セレクトボックスの値を全て取得
セレクトボックスで選択していない値も含めた、全ての値を取得する方法をご紹介します。
テキストを全て取得する
HTML
|
1 2 3 4 5 6 7 8 9 |
<div> <select id="kanagawa"> <option value="yokohama">横浜</option> <option value="kawasaki">川崎</option> <option value="sagamihara">相模原</option> </select> <div><button tydive="button">クリック！</button></div> <p></p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // セレクトボックスで選択したテキストを変数に格納 var city = $('#kanagawa').text(); // p要素にテキストを出力 $('p').text(city); }); }); |
結果（動作サンプル）
ボタンをクリックしてみてください。
HTMLで実際に表示されている都市名が表示されたかと思います。
以下で取得できます。
$( select要素 ).text();
option:selectedを付けなければ全て表示されます。
ただ、全てのテキストが繋がって表示されたため、実用的ではありません。
値を1つずつ取得するためには、次に紹介する方法で試してみてください。
テキストを1つずつ区切りながら全て取得する
実際に使いやすいようにテキストを1つずつ区切りながら取得します。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // ①セレクトボックスのoption要素をchildren()で取得し変数に格納 var cities = $('#kanagawa').children(); // ②for文でoptionの数だけループ処理 for (var i=0; i<cities.length; i++) { // ③コンソールに1つずつ表示 console.log(cities.eq(i).text()); } }); }); |
結果（コンソール）
今回はコンソールに結果を表示させます。
横浜
川崎
相模原
コンソールについては以下の記事で解説しています。
説明
以下のように動作しています。
①セレクトボックスの子要素を children() で全て取得
②for文でoptionの数だけループ処理
参考：for文で繰り返し処理
③コンソールに1つずつ表示
①で取得したoption要素の値をeq(i)で順番を指定しながら表示させています。
iには順番を示す番号が格納されていますので、ループしながらeq(0)eq(1)…と進んでいきます。
eq()は以下のようになります。
eq(0)=> 横浜eq(1)=> 川崎eq(2)=> 相模原
全てのvalueを取得する場合
valueを全て取得する場合は、上記サンプル③のtext()をval()に変えてやるだけでOKです。
複数選択のセレクトボックスを取得
複数選択できるセレクトボックスのvalueやテキストを取得する方法です。
選択したvalue値を取得
セレクトボックスに複数選択するmutipleを付け足しました。
それ以外のコードは、普通のセレクトボックスと変わりません。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div> <select id="saitama" multiple> <option value="saitama">さいたま</option> <option value="kawaguchi">川口</option> <option value="kawagoe">川越</option> </select> <div><button tydive="button">クリック！</button></div> <p></p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // セレクトボックスで選択したvalue値を変数に格納 var city = $('#saitama').val(); // p要素にvalueを出力 $('p').text(city); }); }); |
結果（動作サンプル）
ctrlを押しながら複数選択し（macはcommandを押しながら選択）、ボタンをクリックしてみてください。
1つだけ選択した場合は通常のセレクトボックスと変わりませんが、複数選択すると,（カンマ）区切りの配列で表示されるかと思います。
あとはeach()やfor()などで配列を処理すれば、複数の値も1つずつ取得することができます。
選択したテキストを取得
テキストを複数取得する場合はeach()などでループ処理します。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div> <select id="saitama" multiple> <option value="saitama">さいたま</option> <option value="kawaguchi">川口</option> <option value="kawagoe">川越</option> </select> <div><button tydive="button">クリック！</button></div> <p></p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // ①配列の変数を宣言 var city = []; // ②選択したoption要素をeachで1つずつループ処理 $('#saitama option:selected').each(function() { // ③セレクトボックスで選択したテキストを1つずつ配列に格納 city.push($(this).text()); }); // p要素にテキストを出力 $('p').text(city); }); }); |
結果（動作サンプル）
ctrlを押しながら複数選択し（macはcommandを押しながら選択）、ボタンをクリックしてみてください。
先ほど同様、1つだけ選択した場合は通常のセレクトボックスと変わりませんが、複数選択すると,（カンマ）区切りの配列で表示されるかと思います。
説明
以下のように動作しています。
①配列の変数を宣言
[]は変数を配列の型にするため、配列を格納できるようになります。
②選択したoption要素をeachで1つずつループ処理
each()は指定した要素がなくなるまでループ処理を続けます。
③セレクトボックスで選択したテキストを1つずつ配列に格納
push()を使って、①で宣言した配列に1つずつ値を格納していきます。
push() の構文
格納先の変数 . push( 配列 );
