ドロップダウンで選択された値とテキストを取得するには？［JavaScript／jQuery］：.NET TIPS
HTML中のドロップダウンで選択されている要素は、jQueryのchildren／findメソッドや各種の子セレクタを組み合わせることで簡単に取得できる。
HTMLのドロップダウンリスト（＝<select>要素）で選択されている項目をJavaScriptだけで取得しようとすると、まず<select>要素のselectedIndexプロパティを取得し、それから選択されている<option>要素を取得して……と、ちょっと面倒だ。それが、jQueryを使えば、簡単にできる。
本稿では、jQueryを使って、ドロップダウンリストで選択されている項目の値とテキストを取得する方法を解説する。
例題
次のコードのようなHTMLを考えよう。
<select id="select01">
<option value="value01">選択肢1</option>
<option value="value02">選択肢2</option>
<option value="value03">選択肢3</option>
</select>
ドロップダウンリスト（＝<select>要素）の中に、3つの選択肢（＝<option>要素）が入っている。
このドロップダウンリストで選択状態になっている選択肢（＝<option>要素）の、値とテキストを取得したいとする。例えば、2番目が選択されているならば、その値として「value02」、テキストとして「選択肢2」を取得したい。
ドロップダウンで選択された値を取得するには？
jQueryには、そのためのvalメソッドが用意されている。値だけがほしいなら、valメソッドを使って、次のコードのように1行で書ける。
var selectedValue = $("#select01").val();
たった1行で選択されている値が取得できる。selectedValue変数には、「value01」／「value02」／「value03」のいずれかが入る。
ドロップダウンで選択されたテキストを取得するには？
それには、jQueryでも選択されている<option>要素を取り出してから、そのテキストを取得することになる。ただし、JavaScriptだけで書くよりは、jQueryを使う方がはるかに簡単だ。また、取り出した<option>要素から値も取得できる。ここでは、値とテキストの両方を取得しよう。
ところで、選択されている<option>要素を取り出す方法は、幾つかある。ここでは次の3通りの方法を紹介する。
- jQueryのchildrenメソッドを使う
- jQueryのfindメソッドで子セレクタを使う
- jQueryのセレクタとして子セレクタを使う
上のそれぞれの方法について、詳しくは「.NET TIPS：DOMの子要素を探索するには？［JavaScript／jQuery］」を参照していただきたい。
そして、<option>要素の中から選択されている要素を特定するには、jQueryの「:selectedセレクタ」が利用できる。
まず、jQueryのchildrenメソッドを使うコードは、次のようになる。
// 選択されている<option>要素を取り出す
var selected = $("#select01").children("option:selected"); //「option」は省略可
// 値とテキストを取り出す
var selectedValue = selected.val();
var selectedText = selected.text();
jQueryのchildrenメソッドを使って、選択されている<option>要素を取り出す方法。
<select>要素の下で選択されている要素（＝「:selected」セレクタで見つかるもの）は、<option>要素しかあり得ない。そこで、コメントに書いたように「option」を省略して全ての子要素を対象としても、同じ結果になる。
selectedValue変数には、「value01」／「value02」／「value03」のいずれかが入る。
selectedText変数には、「選択肢1」／「選択肢2」／「選択肢3」のいずれかが入る。
jQueryのfindメソッドで子セレクタを使うコードは、次のようだ。
// 選択されている<option>要素を取り出す
var selected = $("#select01").find("> option:selected"); //「option」は省略可
// 値とテキストを取り出す
var selectedValue = selected.val();
var selectedText = selected.text();
jQueryのfindメソッドで子セレクタを使って、選択されている<option>要素を取り出す方法。
結果は前と同じになる。
そして、jQueryのセレクタとして子セレクタを使うなら、次のコードのようになる。
// 選択されている<option>要素を取り出す
var selected = $("#select01 > option:selected"); //「option」は省略可
// 値とテキストを取り出す
var selectedValue = selected.val();
var selectedText = selected.text();
jQueryのセレクタとして子セレクタを使って、選択されている<option>要素を取り出す方法。
結果は前と同じになる。
まとめ
jQueryでドロップダウンの選択されている値を得るには、valメソッドを利用する。選択されているテキストを得るには選択されている<option>要素を得る必要があるが、それにはDOMの子要素を探索する手法を活用する。
カテゴリ：JavaScript 処理対象：DOM
カテゴリ：オープンソース・ライブラリ 処理対象：JavaScript
使用ライブラリ：jQuery
関連TIPS：Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには？
関連TIPS：UI要素の表示／非表示を判別するには？［JavaScript／jQuery］
関連TIPS：DOMの子要素を探索するには？［JavaScript／jQuery］
関連TIPS：チェックボックスの値を読み書きするには［JavaScript／jQuery］
Copyright© Digital Advantage Corp. All Rights Reserved.