【JavaScript】セレクトボックスの変更を判断し関数を実行する方法｜changeイベントの例

HTMLには、プルダウンメニューの中から項目を選択できるセレクトボックスがありますが、今回は、そのセレクトボックスで選択中の項目が変更された際に、JavaScriptで関数を実行する方法となります。

【JavaScript】セレクトボックスの変更を判断し関数を実行する例

以下の例では、セレクトボックスで選択中の項目が変更された際に、変更後のoption要素のvalue属性値を取得して、コンソールへ出力します。

<select id="select_box" size="1">
	<option value="1" selected>川口</option>
	<option value="2">名良橋</option>
	<option value="3">秋田</option>
</select>

<script>
document.addEventListener('DOMContentLoaded', function(){
	var elem = document.getElementById('select_box');
	elem.addEventListener('change', function(){
		var result = elem.value;
		console.log(result);
	}, false);
}, false);
</script>

上記コード内のaddEventListener()のchangeイベントでは、セレクトボックスで選択中の項目が変更されると、コールバック関数を実行します。

また、addEventListener()のchangeイベントは、input・textarea要素でも利用することができます。詳しくは、文末の参考サイト内を確認してみてください。