JavaScript - セレクトフォームの切り替えイベント

JavaScriptでセレクトフォームの選択肢を切り替えた時をトリガーにしたイベントを実装する簡単なコード例を紹介しています。

HTMLには、値の切り替えを検出する対象としたセレクトフォームタグにいくつかのオプションとid名「target」を指定しています。

<div>
<p id="output">選択肢を変更して下さい。</p>
<select name="fruits" id="target">
	<option value="りんご" selected>りんご</option>
	<option value="ばなな">ばなな</option>
	<option value="ぶどう">ぶどう</option>
</select>
</div>

CSSでは、イベントの対象とするためのサイズを設定しています。

また、CSSでは疑似クラス「focus」にて、要素をクリックしたときのフォーカス時に表示するスタイルを指定する事も可能です。

#target {
	width: 250px;
	margin: 5px;
	padding: 10px;
	font-size: 24px;
}

#output {
	font-size: 20px;
}

対象とする要素はquerySelector()で指定、addEventListener()で「change」を指定して、セレクトフォームの値がが切り替えられた事を検出するイベントを実装しています。

コード例では各イベントの検出時に切り替えられた値を出力エリアに表示しています。

// 対象のフォーム要素
let target = document.querySelector('#target');
// 出力エリア
let outoput = document.querySelector('#output');

target.addEventListener('change', () => {
	// 値が変更された時の処理
	outoput.innerHTML  = `「${target.value}」に変更しました。`;
});