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

サンプル	リストボックスとは
	value値を取得する
	全ての値を選択する/外す(全選択/全解除)

リストボックスとは

以下は実際のリストボックスです。

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

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

リストボックスは、クリックして値を複数選択するときに使用します。
複数の選択はshiftを押しながらクリックします。

selectタグとmultipleを指定します。

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

value値を取得する

値を選択してボタンを押すと、選択した項目のvalue値を取得するサンプルです。
シフト(shift)ボタンを押しながらクリックすると複数選択できます。

選択した色

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

<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>

2～6行目は、リストボックスです。
12行目は、getElementByIdメソッドで3行目のID「color2」を指定して対象を特定(3～5行目)しvalue値(red,yellow,blue)を取得しています。
14行目は、リストボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
15行目は、リストボックスの値が選択されていた場合、if文のselectedの判定がtrueになります。
16行目は、リストボックスのvalue値(red,blue,yellow)を配列にセットしています。

Idを指定しない場合

getElementByIdでIdを指定しない場合は、フォームと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&gt;

14行目は、フォームのname「form1」とリストボックスのname「color1」で対象を特定(4-6行目)しています。

全ての値を選択する/外す(全選択/全解除)

ボタン1を押すと値を全選択します。
ボタン2を押すと全ての選択が外れます。

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

<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="ボタン1" onclick="clickBtn3()" />
<input type="button" value="ボタン2" onclick="clickBtn4()" />

<script>
  function clickBtn3() {
    const color3 = document.form3.color3;
    for (let i = 0; i < color3.length; i++) {
      color3[i].selected = true;
    }
  }
  function clickBtn4() {
    const color3 = document.form3.color3;
    for (let i = 0; i < color3.length; i++) {
      color3[i].selected = false;
    }
  }
</script>

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