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

nas2017/06/17

目次

01. セレクトボックス

・セレクトボックスとは

02. サンプル

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

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

・選択したらvalue値を取得する(changeイベント)

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

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

セレクトボックスとは

以下は実際のセレクトボックスです。値を選択できます。

 

上記セレクトボックスのhtmlのコードです。

<select id="select1">
    <option value="1">red</option>
    <option value="2">yellow</option>
    <option value="3">blue</option>
</select>

 

セレクトボックスは、値を選択するときに使用します。利用者は文字入力が不要です。

以下の名称でも呼ばれます。

・ドロップダウンリスト

・プルダウンメニュー

・ドロップダウンメニュー

選択された値はJavaScriptで取得できます。

 

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

ボタンを押すとセレクトボックスの選択した値を取得するサンプルです。
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").textContent = str;
}
</script>

3～7行目は、セレクトボックスです。
8行目のボタンをクリックすると11行目の関数が実行されます。
12行目は、getElementByIdメソッドで3行目のID「color3」を指定して対象を特定(4～6行目)しvalue値(red,yellow,blue)を取得しています。

 

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

ボタンを押すとセレクトボックスの値を設定するサンプルです。青になります。
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行目は、セレクトボックスです。
6行目のボタンをクリックすると9行目の関数が実行されます。
10行目は、getElementByIdメソッドで1行目のID「color4」を指定して対象を特定(2～4行目)しselectedIndexに選択する項目(数値)を設定しています。このサンプルでは2を設定しているので青になります。(赤が0,黄が1,青が2です)

 

選択したらvalue値を取得する(changeイベント)

選択したらvalue値を取得します。

選択した色

 

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

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

<select id="color4">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
</select>

<script>
    const str = document.getElementById("color4");

    str.addEventListener("change", function (e) {
        document.getElementById("span4").textContent = str.value;
    });
</script>

12行目は、addEventListenerメソッドです。画面表示時にイベントリスナを登録をしています。
1つめの引数は"change"のイベントです。changeされたときに実行されます。

 

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

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

選択した色

　

 

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

<p>選択した色 <span id="span1"></span></p>
<form name="form1">
	<select name="color1">
	    <option value="red">red</option>
	    <option value="yellow">yellow</option>
	    <option value="blue">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").textContent = str; 
}
</script>

3～7行目は、セレクトボックスです。
9行目のボタンをクリックすると12行目の関数が実行されます。
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でvalue値を設定する

ボタンを押すとセレクトボックスの値を設定するサンプルです。青になります。
フォーム(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行目は、セレクトボックスです。
8行目のボタンをクリックすると11行目の関数が実行されます。
12行目は、フォームのname「form2」とセレクトボックスのname「color2」で対象を特定(3～5行目)しselectedIndexに選択する項目(数値)を設定しています。
このサンプルでは2を設定しているので青になります。(赤が0,黄が1,青が2です)

関連の記事

JavaScript チェックボックスの値を取得/設定する
jQuery セレクトボックスの値を取得/設定する

△上に戻る