JavaScript | セレクトメニュー（select）の変更イベントを実装する方法
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}`;
});