JavaScript セレクトボックスの値を取得/設定するサンプル

JavaScriptのセレクトボックスの値を取得/設定するサンプルです。

コード

以下の4つのサンプルがあります。

No 説明
値を取得
10行目は、フォームのname「form1」とセレクトボックスのname「color1」で対象を特定(36-38行目)しselectedIndexで選択されている項目(数値)を取得しています。
13行目は、取得した項目(数値)をoptionsに指定しvalueでvalueの値を取得しています。
値を設定
19行目は、フォームのname「form1」とセレクトボックスのname「color1」で対象を特定(36-38行目)しselectedIndexに選択する項目(数値)を設定しています。サンプルでは2を設定しているので青になります。(赤が0,黄が1,青が2です)
値を取得
23行目は、getElementByIdメソッドでID「select1」を指定して対象を特定(36-38行目)しvalueで値を取得しています。
値を設定
28行目は、getElementByIdメソッドでID「select1」を指定して対象を特定(36-38行目)しselectedIndexに選択する項目(数値)を設定しています。サンプルでは2を設定しているので青になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>セレクトボックスのサンプル</title>
<script>
// No.1 値を設定
function btn1_click(){
	// 1-1 値(数値)を取得
	var num = document.form1.color1.selectedIndex;

	// 1-2 値(value値)を取得
	var str = document.form1.color1.options[num].value;

	document.getElementById("sp1").innerHTML = str; 
}
// No.2 値を設定
function btn2_click(){
	document.form1.color1.selectedIndex = 2;
}
// No.3 getElementByIdメソッドで値を取得
function btn3_click(){
	var str = document.getElementById("select1").value
	document.getElementById("sp1").innerHTML = str;
}
// No.4 getElementByIdメソッドで値を設定
function btn4_click(){
	document.getElementById("select1").selectedIndex = 2;
}
</script>
</head>
<body >
<p>選択した色 <span id="sp1"></span></p>
<form name="form1">
<select name="color1" id="select1">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
<br/>
<input type="button" value="ボタン1" onclick="btn1_click()"/><br/>
<input type="button" value="ボタン2" onclick="btn2_click()"/><br/>
<input type="button" value="ボタン3" onclick="btn3_click()"/><br/>
<input type="button" value="ボタン4" onclick="btn4_click()"/><br/>
</form>
</body>
</html>

サンプル

上記コードのサンプルです。 実際に動きます。
ボタン1,3を押すと、セレクトボックスの選択されている値を表示します。
ボタン2,4を押すと、セレクトボックスの選択されている値を"青"にします。
ボタン3,4は、getElementByIdメソッドを使用しています。

選択した色





関連の記事

JavaScript ラジオボタンの値を取得/設定するサンプル
JavaScript チェックボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定するサンプル
JavaScript テキストボックスの値を取得/設定するサンプル
JavaScript テキストエリアの値を取得/設定するサンプル
jQuery セレクトボックスの値を取得/設定するサンプル




△上に戻る