JavaScript: セレクトボックスの値を取得・設定する

JavaScriptでセレクトボックス（コンボボックス）の値を 取得・設定する方法を紹介します。

結論から言うと、valueプロパティで取得・設定できます。

セレクトボックスの値を取得する（getElementById()）

getElementById()で要素を取得し、 valueプロパティでセレクトボックスのvalue値を取得できます。

■ HTML


<select name="age" id="age">
	<option value="2" selected>20代</option>
	<option value="3">30代</option>
	<option value="4">40代</option>
	<option value="0">その他</option>
</select>

■ JavaScript


var age = document.getElementById("age");

console.log(age.value); // 2

ここで取得できるのは「2、3、4、0」といったvalue属性の値です。

HTML側でvalue属性が設定されていない場合

HTML側でoption要素のvalue属性が設定されていない場合は、 option要素の値を取得できます。

■ HTML


<select name="age2" id="age2">
	<option selected>20代</option>
	<option>30代</option>
	<option >40代</option>
	<option>その他</option>
</select>

■ JavaScript


var age = document.getElementById("age2");

console.log(age.value); // 20代

ここで取得できるのは「20代、30代、40代、その他」 といったoption要素の値です。

セレクトボックスの値を設定する（getElementById()）

HTML側でoption要素のvalue属性が設定されている場合は、 valueプロパティにvalue属性の値を指定します。 

var age = document.getElementById("age");
age.value = "3";
value属性が設定されていない場合は、 option要素の値を指定します。 

var age = document.getElementById("age2");
age.value = "30代";

セレクトボックスに存在しない値を設定した場合

存在しない値を設定した場合は、 セレクトボックスは下図のように何も表示されません。

javascript セレクトボックス

■ JavaScript


var age = document.getElementById("age");
age.value = "5"; // 存在しないvalue値を指定
JavaScript入門