JavaScript: リストボックス(複数選択)の値を取得・設定する

JavaScriptでリストボックス(複数選択)の値を取得・設定する方法を紹介します。

単数選択リストボックスの場合はvalueプロパティだけで取得・設定できるのですが、 複数選択リストボックスの場合はselectedプロパティとvalueプロパティの2つを使って 取得・設定する必要があります。

リストボックス(複数選択)の値を取得する

リストボックスを複数選択にするには、 selectタグに「multiple」属性を追加します。
(ctrlキーを押しながら選択すると複数選択できます。)

HTML
<p>あなたが持っている乗り物はどれですか?</p>

<select id="goods" multiple size="3">
	<option value="bicycle">自転車</option>
	<option value="bike">バイク</option>
	<option value="car">車</option>
</select>

次のサンプルコードでは、 リストボックスの選択されている項目のvalue値をコンソールに表示しています。

JavaScript
let e = document.getElementById("goods");

// option要素を取得
let opts = e.options;

for (let i = 0; i < opts.length; i++) {
	if (opts[i].selected){
		console.log(opts[i].value);
	}
} 

option要素はselect要素のoptionsプロパティで取得できます。

リストの項目が選択されているかはselectedプロパティのtrue/falseで判断できます。 そして選択されている場合のみvalue値をコーンソールに表示しています。

リストボックス(複数選択)の値を設定する

HTML部分は先程と同じで、 「自転車」と「車」を選択状態にします。

HTML
<p>あなたが持っている乗り物はどれですか?</p>

<select id="goods" multiple size="3">
	<option value="bicycle">自転車</option>
	<option value="bike">バイク</option>
	<option value="car">車</option>
</select>

JavaScriptのコードは次の通りです。

JavaScript
// 選択する項目
let select_list = ["bicycle", "car"];


let e = document.getElementById("goods");

// option要素を取得
let opts = e.options;

for (let i = 0; i < opts.length; i++) {

	if (select_list.includes(opts[i].value)) {
		opts[i].selected = true;
	} else {
		opts[i].selected = false;
	}
	
} 

コードを解説します。

// 選択する項目
let select_list = ["bicycle", "car"];

選択する項目を配列「selected_list」に格納しています。

if (select_list.includes(opts[i].value)) {
	opts[i].selected = true;
} else {
	opts[i].selected = false;
}

上のコードでは配列のincludesメソッドを使って、 option要素の値が配列「selected_list」 に含まれるかどうかをチェックしています。

includesメソッドの戻り値がtrueの場合は option要素のselectedプロパティをtrueに設定して、 戻り値がfalseの場合は selectedプロパティをfalseに設定しています。

JavaScript入門