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

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

確認環境
・Windows10
・Google Chrome

フォームとnameでvalue値を取得する
getElementByIdメソッドでvalue値を取得する
全ての値を選択する(全選択)
全ての値の選択を外す

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

値を選択すると、チェックされた項目のvalue値を取得するサンプルです。
フォーム(form)とリストボックスのnameを使用します。

選択した色

コード

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

<p>選択した色 <span id="span1"></span></p>
<form name="form1">
	<select name="color1" multiple size="3">
	    <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 arr1 = [];
	const color1 = document.form1.color1;

	for (let i = 0; i < color1.length; i++){
		if(color1[i].selected){ //(color1[i].selected === true)と同じ
			arr1.push(color1[i].value);
		}
	}
	document.getElementById("span1").textContent = arr1; 
}
</script>

3～7行目は、リストボックスです。
14行目は、フォームのname「form1」とリストボックスのname「color1」で対象を特定(4-6行目)しています。
16行目は、リストボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
17行目は、リストボックスの値が選択されていた場合、if文のselectedの判定がtrueになります。
18行目は、リストボックスのvalue値(red,blue,yellow)を配列にセットしています。

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

値を選択すると、チェックされた項目のvalue値を取得するサンプルです。
getElementByIdメソッドを使用します。フォーム(form)がなくても取得できます。

選択した色

コード

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

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

	<select id="color2" multiple size="3">
	    <option value="red">赤</option>
	    <option value="yellow">黄</option>
	    <option value="blue">青</option>
	</select>

<input type="button" value="ボタン1" onclick="clickBtn2()"/>

<script>
function clickBtn2(){
	const arr2 = [];
	const color2 = document.getElementById("color2");

	for (let i = 0; i < color2.length; i++){
		if(color2[i].selected){ //(color2[i].selected === true)と同じ
			arr2.push(color2[i].value);
		}
	}
	document.getElementById("span2").textContent = arr2;
}
</script>

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

全ての値を選択する(全選択)

全ての値を選択するサンプルです。
ボタンを押すと値を全選択します。

コード

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

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

<script>
function clickBtn3(){
	const color3 = document.form3.color3;

	for (let i = 0; i < color3.length; i++){
		color3[i].selected = true;
	}
}
</script>

3～7行目は、リストボックスです。
12行目は、フォームのname「form3」とリストボックスのname「color3」で対象を特定(4～6行目)しています。
14行目は、リストボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
15行目は、各項目に対してcheckedをtrueにして選択をしています。

全ての値の選択を外す

全ての値の選択を外すサンプルです。
ボタンを押すと選択が外れます。

コード

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

<form name="form4">
	<select name="color4" multiple size="3">
	    <option value="red" selected>赤</option>
	    <option value="yellow">黄</option>
	    <option value="blue" selected>青</option>
	</select>
</form>
<input type="button" value="ボタン4" onclick="clickBtn4()"/>

<script>
function clickBtn4(){
	const color4 = document.form4.color4;

	for (let i = 0; i < color4.length; i++){
		color4[i].selected = false;
	}
}
</script>