ドロップダウンで選択された値とテキストを取得するには？［JavaScript／jQuery］：.NET TIPS

HTML中のドロップダウンで選択されている要素は、jQueryのchildren／findメソッドや各種の子セレクタを組み合わせることで簡単に取得できる。

» 2016年06月08日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

　HTMLのドロップダウンリスト（＝<select>要素）で選択されている項目をJavaScriptだけで取得しようとすると、まず<select>要素のselectedIndexプロパティを取得し、それから選択されている<option>要素を取得して……と、ちょっと面倒だ。それが、jQueryを使えば、簡単にできる。

　本稿では、jQueryを使って、ドロップダウンリストで選択されている項目の値とテキストを取得する方法を解説する。

例題

　次のコードのようなHTMLを考えよう。

例題のHTML
ドロップダウンリスト（＝<select>要素）の中に、3つの選択肢（＝<option>要素）が入っている。

　このドロップダウンリストで選択状態になっている選択肢（＝<option>要素）の、値とテキストを取得したいとする。例えば、2番目が選択されているならば、その値として「value02」、テキストとして「選択肢2」を取得したい。

ドロップダウンで選択された値を取得するには？

　jQueryには、そのためのvalメソッドが用意されている。値だけがほしいなら、valメソッドを使って、次のコードのように1行で書ける。

var selectedValue = $("#select01").val();

ドロップダウンで選択された値を取得するコードの例（JavaScript）
たった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();

ドロップダウンで選択されたテキストを取得するコードの例（JavaScript）
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();

ドロップダウンで選択されたテキストを取得するコードの例（JavaScript）
jQueryのfindメソッドで子セレクタを使って、選択されている<option>要素を取り出す方法。
結果は前と同じになる。

　そして、jQueryのセレクタとして子セレクタを使うなら、次のコードのようになる。

// 選択されている<option>要素を取り出す
var selected = $("#select01 > option:selected"); //「option」は省略可

// 値とテキストを取り出す
var selectedValue = selected.val();
var selectedText = selected.text();

ドロップダウンで選択されたテキストを取得するコードの例（JavaScript）
jQueryのセレクタとして子セレクタを使って、選択されている<option>要素を取り出す方法。
結果は前と同じになる。