JavaScript - 単一選択のセレクトボックスの選択値を取得する value

JavaScriptで（単一選択の）セレクトボックスの値を取得する場合は、 value プロパティを使用します。

ここでは、id属性、name属性を利用してセレクトボックスの値を取得する方法を紹介します。

id属性を使って取得する(getElementById)

id属性を使って値を取得する場合のサンプルコードです。

HTML

<form>
	<select id="idname" name="test">
		<option>text1</option>
		<option selected>text2</option>
		<option>text3</option>
	</select>
</form>

JavaScript

getElementById()メソッドで要素を取得し、 valueプロパティで値を取得します。

var elem = document.getElementById('idname');

console.log(elem.value); // text2

console.log(elem);       // <select id="idname" name="test">...</select>

name属性を使って取得する(getElementsByName)

name属性を使って値を取得する場合のサンプルコードです。

HTML

<form>
	<select name="test">
		<option>text1</option>
		<option selected>text2</option>
		<option>text3</option>
	</select>
</form>

JavaScript

getElementsByName()メソッドでNodeListオブジェクトを取得します。

0番目の要素のvalueプロパティがセレクトボックスの値となります。

var nodes = document.getElementsByName('test');

console.log(nodes[0].value); // text2

console.log(nodes);          // NodeList [select]

nodes[0]というように、 0番目の値を取得する点が、getElementById()の場合と異なります。