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

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

確認環境
・Windows10
・Google Chrome/IE11

目次

フォームとnameで値を取得する

ボタンを押すとセレクトボックスの選択した値を取得するサンプルです。
フォーム(form)とセレクトボックスのnameを使用します。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span1"></span></p>
<form name="form1">
	<select name="color1">
	    <option value="red">赤</option>
	    <option value="yellow">黄</option>
	    <option value="blue">青</option>
	</select>
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()"/>

<script>
function clickBtn1(){

	const color1 = document.form1.color1;

	// 値(数値)を取得
	const num = color1.selectedIndex;
	//const num = document.form1.color1.selectedIndex;

	// 値(数値)から値(value値)を取得
	const str = color1.options[num].value;
	//const str = document.form1.color1.options[num].value;

	document.getElementById("span1").innerHTML = str; 
}
</script>

3-7行目は、セレクトボックスです。
14行目は、フォームのname「form1」とセレクトボックスのname「color1」で対象を特定(4-6行目)しています。
17行目は、selectedIndexで選択されている項目(数値)を取得しています。
18行目は、17行目と同じ意味です。「document.form1.color1」は、21行目でも使用するので14行目で変数にセットしています。
21行目は、取得した項目(数値)をoptionsに指定しvalue値(red,yellow,blue)を取得しています。
22行目は、21目と同じ意味です。

 

フォームとnameで値を設定する

ボタンを押すとセレクトボックスの値を設定するサンプルです。青になります。
フォーム(form)とセレクトボックスのnameを使用します。

コード

上記サンプルのコードです。

<form name="form2">
	<select name="color2">
	    <option value="red">赤</option>
	    <option value="yellow">黄</option>
	    <option value="blue">青</option>
	</select>
</form>
<input type="button" value="ボタン2" onclick="clickBtn2()"/>

<script>
function clickBtn2(){
	document.form2.color2.selectedIndex = 2;
}
</script>

2-6行目は、セレクトボックスです。
12行目は、フォームのname「form2」とセレクトボックスのname「color2」で対象を特定(3-5行目)しselectedIndexに選択する項目(数値)を設定しています。
このサンプルでは2を設定しているので青になります。(赤が0,黄が1,青が2です)

 

getElementByIdメソッドで値を取得する

ボタンを押すとセレクトボックスの選択した値を取得するサンプルです。
getElementByIdメソッドを使用します。フォーム(form)がなくても取得できます。

選択した色

 

コード

上記サンプルのコードです。

<p>選択した色 <span id="span3"></span></p>

<select id="color3">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
<input type="button" value="ボタン3" onclick="clickBtn3()"/>

<script>
function clickBtn3(){
	const str = document.getElementById("color3").value;

	document.getElementById("span3").innerHTML = str;
}
</script>

3-7行目は、セレクトボックスです。
12行目は、getElementByIdメソッドで3行目のID「color3」を指定して対象を特定(4-6行目)しvalue値(red,yellow,blue)を取得しています。

 

getElementByIdメソッドで値を設定する

ボタンを押すとセレクトボックスの値を設定するサンプルです。青になります。
getElementByIdメソッドを使用します。フォーム(form)がなくても取得できます。

 

コード

上記サンプルのコードです。

<select id="color4">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
<input type="button" value="ボタン4" onclick="clickBtn4()"/>

<script>
function clickBtn4(){
	document.getElementById("color4").selectedIndex = 2;
}
</script>

1-5行目は、セレクトボックスです。
10行目は、getElementByIdメソッドで1行目のID「color4」を指定して対象を特定(2-4行目)しselectedIndexに選択する項目(数値)を設定しています。このサンプルでは2を設定しているので青になります。(赤が0,黄が1,青が2です)

関連の記事

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

△上に戻る