如何在 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;
}

此函数接受选择元素作为参数并返回选定值的数组。这是一个演示其用法的快速示例：

<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中文网其他相关文章！