JavaScript | セレクトメニュー（プルダウン）の状態を取得する方法
JavaScriptでHTMLフォームにあるセレクトフォームメニュー（プルダウンメニュー）の選択状態を取得する方法を紹介しています。
セレクトメニューの状態を取得する
HTMLフォームのセレクトメニューで選択されている状態を取得するJavaScriptのサンプルコードです。
HTMLにはselect要素に3つのoption要素を追加した基本的なセレクトメニュー構造を使っています。
<select name="choices">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>セレクトメニューの各選択肢の情報を得るには、option要素を取得する必要があります。
サンプルではname属性がchoicesとなっているselect要素にあるoption要素をquerySelectorAll()で取得しています。
取得した要素の配列情報をfor of文で繰り返し、e.valueでvalue値、e.selectedで選択されているかどうかをtrueまたはfalseで取得しています。
let targets = document.querySelectorAll(`select[name='choices'] option`);
for (let e of targets) {
console.log(e.value, e.selected);
}上記の場合、コンソールログには以下の結果が表示されます。
1 true
2 false
3 false変更があった場合にセレクトメニューの状態を取得する
ページにアクセスしているユーザーがセレクトメニューの選択肢を変更した場合にイベント発火させて、セレクトメニューの選択状態を取得するサンプルです。
See the Pen JavaScript Copy text to clipboard by yochans (@yochans) on CodePen.
HTML構造は上記のものと同じく、select要素に3つのoption要素を追加した基本的なコードを利用しています。
<select name="choices">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>選択肢が変更されたことを取得するaddEventListener()のchangeですが、これはoption要素ではなく親要素のselect要素に対して指定することで上手くいきます。
イベント関数内で、子要素にあたるoption要素を展開して状態を取得、コンソールログに表示しています。
let options = document.querySelectorAll(`select[name='choices'] option`);
document.querySelector(`select[name='choices']`).addEventListener(`change`, function () {
for (let e of options) {
console.log(e.value, e.selected);
}
})以下のコードは変更があった場合にセレクトメニューの状態を取得するアロー関数バージョンになっています。
let options = document.querySelectorAll(`select[name='choices'] option`);
document.querySelector(`select[name='choices']`).addEventListener(`change`, () => {
for (let e of options) {
console.log(e.value, e.selected);
}
})