JavaScript | セレクトメニュー(プルダウン)の状態を取得する方法

JavaScript,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);
	}
})