如何在 JavaScript 中從多選元素中取得選定的值？

從多選元素中獲取所有選定的選項

在Web 開發領域，普遍的要求是檢索選定的值使用JavaScript 從多重選擇框中。為了滿足這項需求，讓我們深入研究提供的解決方案。

一種方法涉及迭代 select 元素中的選項，檢查它們是否被選中，並將它們的值累積到陣列中。雖然此方法很簡單，但可能很麻煩，尤其是在處理大型清單時。

如第二個答案中建議的更優雅的解決方案涉及 getSelectValues() 函數。它有效地循環遍歷選項，收集選定的值，無論它們是從選項的值屬性還是其文字內容派生的。

考慮提供的範例：

<code class="html">&lt;select multiple&gt;
  &lt;option&gt;opt 1 text&lt;/option&gt;
  &lt;option value=&quot;opt 2 value&quot;&gt;opt 2 text&lt;/option&gt;
&lt;/select&gt;

&lt;button onclick=&quot;
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
&quot;&gt;Show selected values&lt;/button&gt;</code>

當按鈕點擊後，getSelectValues() 函數會擷取所選選項值並將其顯示在警報對話方塊中。這證明了此方法的簡單性和靈活性。

無論您選擇手動迭代還是使用getSelectValues() 函數，您都有一個強大的解決方案來從多個選擇框中檢索所選值，使您能夠存取並在您的Web 應用程式中有效地操作數據。

以上是如何在 JavaScript 中從多選元素中取得選定的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！