JavaScript | セレクトメニュー(select)の変更イベントを実装する方法

2022-01-30

JavaScriptを使ってセレクトメニューの変更をトリガーにした発火イベントの実装方法を紹介しています。

セレクトメニューの変更イベント

セレクトメニューの切り替え、変更が行われた時にそれをトリガーにしたイベントを発火させる動作サンプルとサンプルコードになります。

サンプルではイベント発火で選択されている値を取得、表示しています。

See the Pen JavaScript | Radio Button Event by yochans (@yochans) on CodePen.

HTMLにはシンプルなセレクトメニューを配置しています。

<p>タグの「.output」は動作テストの出力用スペースになります。

<select name="type">
	<option value="A" selected>A</option>
	<option value="B">B</option>
	<option value="C">C</option>
</select>

<p id="output">Change the select</p>

セレクトメニューのHTML要素を取得するのにquerySelector()メゾットを利用しています。
重複を避けるため、name属性の値も指定。

関連:JavaScript | querySelector()とquerySelectorAll()の使い方、指定方法まとめ | ONE NOTES

idやclass名を付与するのであれば、getElementById()等を使っても問題ありません。

イベントは<option>ごとに指定するのではなく<select>に対して実装しています。
セレクトメニューはvalue属性にて選択している<option>のvalue値を取得する事が可能です。

optionsで選択肢を個別に判別する事も可能ですが、セレクトメニューは常にひとつしか選択できない為、多くの場合はこの方法で問題ないと思います。

let select = document.querySelector(`select[name='type']`);

select.addEventListener(`change`, function () {
	document.querySelector(`#output`).innerHTML = `Selected : ${select.value}`;
});

以下は、アロー関数バージョンになります。

let select = document.querySelector(`select[name='type']`);

select.addEventListener(`change`, () => {
	document.querySelector(`#output`).innerHTML = `Selected : ${select.value}`;
});