【JavaScript】セレクトボックスで選択中のoptionがもつvalue値を取得する方法

HTMLには、プルダウンメニューの中から項目を選択できるセレクトボックスがありますが、今回は、そのセレクトボックスで選択中のoptionがもつvalue属性値を、JavaScriptで取得する方法となります。

【JavaScript】セレクトボックスで選択中のoptionのvalue属性値を取得を取得する方法

以下の例では、その選択中のoption要素のvalue属性値を取得して、コンソールに出力しています。

また、option要素はselected属性を持っている要素が、セレクトボックスで選択中の要素となります。

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

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

上記例では、コンソールの出力結果は 2 となります。

ソースコードの説明

上記例のように、取得したselect要素のオブジェクトに対して、valueプロパティを指定することにより、セレクトボックスで選択中のoptionがもつvalue属性値を取得できます。

また、option要素にvalue属性値がない場合には、option要素内の文字列を取得します。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。