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

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

目次

formの名称を指定して値を取得する

formの名称を指定して値を取得するサンプルです。
4行目は、フォームのname「form1」とセレクトボックスのname「color1」で対象を特定(15-17行目)しselectedIndexで選択されている項目(数値)を取得しています。
7行目は、取得した項目(数値)をoptionsに指定しvalue値(red,yellow,blue)を取得しています。

<script>
function btn1_click(){
	// 値(数値)を取得
	var num = document.form1.color1.selectedIndex;

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

	document.getElementById("sp1").innerHTML = str; 
}
</script>
<p>選択した色 <span id="sp1"></span></p>
<form name="form1">
<select name="color1">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
</form>
<br/>
<input type="button" value="ボタン1" onclick="btn1_click()"/>

サンプル

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

選択した色

 

formの名称を指定して値を設定する

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

<script>
function btn2_click(){
	document.form2.color2.selectedIndex = 2;
}
</script>
<form name="form2">
<select name="color2">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
</form>
<br/>
<input type="button" value="ボタン2" onclick="btn2_click()"/>

サンプル

上記コードのサンプルです。
ボタンを押すと値が青になります。

 



getElementByIdメソッドを使用して値を取得する

getElementByIdメソッドを使用して値を取得するサンプルです。
3行目は、getElementByIdメソッドで10行目のID「select3」を指定して対象を特定(11-13行目)しvalue値(red,yellow,blue)を取得しています。

<script>
function btn3_click(){
	var str = document.getElementById("select3").value

	document.getElementById("sp3").innerHTML = str;
}
</script>
<p>選択した色 <span id="sp3"></span></p>

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

サンプル

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

選択した色


 

getElementByIdメソッドを使用して値を設定する

getElementByIdメソッドを使用して値を設定するサンプルです。
3行目は、getElementByIdメソッドで10行目のID「select4」を指定して対象を特定(7-9行目)しselectedIndexに選択する項目(数値)を設定しています。このサンプルでは2を設定しているので青になります。(赤が0,黄が1,青が2です)

<script>
function btn4_click(){
	document.getElementById("select4").selectedIndex = 2;
}
</script>
<select name="color4" id="select4">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
<br/>
<input type="button" value="ボタン4" onclick="btn4_click()"/>

サンプル

上記コードのサンプルです。
ボタンを押すと値が青になります。


関連の記事

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

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る