JavaScript で複数の選択ボックスから選択された値を取得するにはどうすればよいですか?

JavaScript を使用して複数選択ボックスから値を取得する

複数選択ボックスが表示されるシナリオでは、その選択された値にアクセスすることが不可欠です。この質問では、JavaScript を使用してこれらの値を取得する効果的なアプローチについて詳しく説明します。

まず、指定したコード スニペットは、複数選択ボックスのオプションを反復処理して、各オプションが選択されているかどうかを確認します。 true の場合、オプションの値は配列に追加されます。

選択された値を取得するための簡潔かつ効率的な方法を提供する代替ソリューションを以下に示します。

<code class="js">function getSelectValues(select) {
  // Create an empty array to store the values.
  const result = [];

  // Obtain the options from the select element.
  const options = select && select.options;

  // Loop through the options to check which ones are selected.
  for (let i = 0; i < options.length; i++) {
    const option = options[i];

    // If the option is selected, we push its value into the result array.
    if (option.selected) {
      result.push(option.value || option.text);
    }
  }

  // Return the populated result array with the selected values.
  return result;
}

この関数は次の値を受け取ります。 select 要素を引数として指定し、選択された値の配列を返します。その使用法を示す簡単な例を次に示します。

<code class="html"><select multiple>
  <option>Option 1</option>
  <option value="value-2">Option 2</option>
</select>

<button onclick="
  const selectElement = document.getElementsByTagName('select')[0];
  const selectedValues = getSelectValues(selectElement);
  console.log(selectedValues);
">Show Selected Values</button></code>

以上がJavaScript で複数の選択ボックスから選択された値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。