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

JavaScriptで複数選択リストボックスの値を取得・設定する方法について解説します。

複数選択リストボックスを操作する方法を教えてくれますか？

複数選択リストボックスから値を取得・設定する方法について説明します。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

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

複数選択リストボックスから値を取得するには、以下のような方法があります。

選択された項目を一つずつ取得する方法

複数選択リストボックスから選択された項目を一つずつ取得するには、forループを使うのが一般的です。

forループ内で、selectedプロパティがtrueの項目のvalueプロパティを取得することで、選択された項目を取得することができます。

以下は、複数選択リストボックスから選択された項目を一つずつ取得する方法のサンプルプログラムです。

<select multiple id="mySelect">
  <option value="value1">項目1</option>
  <option value="value2">項目2</option>
  <option value="value3">項目3</option>
  <option value="value4">項目4</option>
</select>

<script>
  const select = document.querySelector("#mySelect");
  const options = select.options;
  
  for (let i = 0; i < options.length; i++) {
    if (options[i].selected) {
      console.log(options[i].value);
    }
  }
</script>

選択されたすべての項目を取得する方法

　複数選択リストボックスから選択されたすべての項目を取得するには、querySelectorAllメソッドを使うことができます。

querySelectorAllメソッドにて、「:checked」セレクタを指定することで、選択されたすべての項目を取得することができます。

以下は、複数選択リストボックスから選択されたすべての項目を取得する方法のサンプルプログラムです。

<select multiple id="mySelect">
  <option value="value1">項目1</option>
  <option value="value2">項目2</option>
  <option value="value3">項目3</option>
  <option value="value4">項目4</option>
</select>

<script>
  const selectedOptions = document.querySelectorAll("#mySelect option:checked");
  
  for (const option of selectedOptions) {
    console.log(option.value);
  }
</script>

複数選択リストボックスの値の設定方法

　複数選択リストボックスの値の設定するには、HTML DOMの「selected」プロパティを利用する方法と、JavaScriptの「for」文を利用する方法があります。

「selected」プロパティを利用する方法では、以下のように記述します。

document.getElementById("リストボックスのID").options[インデックス番号].selected = true;

この方法では、「options」オブジェクトを通じて「selected」プロパティを設定することで、選択状態になります。

JavaScriptの「for」文を利用する方法では、以下のように記述します。

for (var i = 0; i < リストボックスのオプション数; i++) {
    document.getElementById("リストボックスのID").options[i].selected = (i == インデックス番号);
}

この方法では、「for」文を使って「options」オブジェクトの要素を一つずつ取り出して「selected」プロパティを設定することで、選択状態になります。

サンプルプログラムは以下のようになります。

<!DOCTYPE html>
<html>
<head>
<script>
function setSelection() {
    var selectBox = document.getElementById("mySelect");
    for (var i = 0; i < selectBox.options.length; i++) {
        selectBox.options[i].selected = (i == 1 || i == 3);
    }
}
</script>
</head>
<body>

<select id="mySelect" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="orange">Orange</option>
  <option value="peach">Peach</option>
</select>

<br><br>
<button onclick="setSelection()">Set Selection</button>

</body>
</html>

　このサンプルでは、HTML DOMの「getElementById」メソッドを利用して「mySelect」というIDを持つリストボックスを取得しています。次に、「for」文を使って「options」オブジェクトの要素を一つずつ取り出して「selected」プロパティを設定しています。最後に「Set Selection」というボタンを押すと、「Banana」と「Orange」が選択状態になります。

このように、「複数選択リストボックスの値の設定方法」は、JavaScriptの「for」文を利用することで簡単に実現することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。