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に設定しています。