jQuery selectタグで選択された値とテキストの取得方法
jQueryでselectタグにて選択された値とテキストの取得方法です。
jQueryでセレクトボックスで選択した値は .val() テキストは .text() で取得できますが、ちょっとだけ注意が必要です。
テキストは選択されたものだけを取得するには option:selected を指定しないといけません。
ここでは jQueryでselectタグにて選択された値とテキストの取得方法 を紹介します。
Sponsored Links
単一要素の取得方法
単一要素の取得方法です。値は .val() テキストは .text() に option:selected を指定します。
<select name="single"> <option value="hoge">ほげ</option> <option value="piyo">ぴよ</option> <option value="fuga">ふが</option> <option value="saka">さか</option> </select>
$('[name=single]').change(function() { // 選択された値を取得する var value = $('[name=single]').val(); console.log(value); // 出力:hoge // 選択された表示文字列を取得する var text = $('[name=single] option:selected').text(); console.log(text); // 出力:ほげ });
Sponsored Links
複数要素の取得方法
selectタグにmultiple属性が指定された複数要素を取得する方法です。
単一要素と同じ取得方法では、表示文字列はすべて連結されて1つの文字列として取得されてしまいます。そこでeachを使用して配列にpushします。
<select name="multi" multiple='multiple'> <option value="hoge">ほげ</option> <option value="piyo">ぴよ</option> <option value="fuga">ふが</option> <option value="saka">さか</option> </select>
$('[name=multi]').change(function() { // 複数選択された値を取得する var value = $('[name=multi]').val(); console.log(value); // 出力:['hoge', 'piyo'] // 複数選択された示文字列を取得する var text = $('[name=multi] option:selected').text(); console.log(text); // 出力:ほげぴよ // 複数選択された表示文字列を配列で取得する var array = []; $('[name=multi] option:selected').each(function() { array.push($(this).text()); }); console.log(array); // 出力:["ほげ", "ぴよ"] });
ふむ、いい感じ。
まとめ
jQueryでselectタグにて選択された値とテキストの取得方法を紹介しました。
表示文字列の取得方法って、結構な頻度で使うんだけど、いつも忘れちゃうんですよね。特にmultiple属性が指定されている場合とか、いつもアレ?ってなる。
筆者と同じ忘れん坊さんも、このサイトに書いてあるってことだけは覚えておいてくださいねw
おつかれさまでした。
Sponsored Links