如何在 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中文網其他相關文章！