處理具有多個選擇功能的表單元素時,常見任務涉及提取所選值。這對於需要捕獲用戶偏好或選擇的場景尤其相關。
用於提取所選值的JavaScript 技術
從對於具有multiple 屬性的元素,JavaScript 提供了一種簡單的方法:
<code class="javascript">function getSelectValues(select) { var values = []; for (var i = 0; i < select.options.length; i++) { if (select.options[i].selected) { values.push(select.options[i].value || select.options[i].text); } } return values; }
此函數迭代
用法範例
考慮以下HTML 標籤:
<code class="html"><select multiple> <option>Option 1</option> <option value="Option 2">Option 2</option> </select> <button onclick=" var select = document.querySelector('select'); var values = getSelectValues(select); alert(values); "> Show Selected Values </button></code>
按一下按鈕時,呼叫getSelectValues 函數,所選值會顯示在警報框中。
其他注意事項
上面概述的 JavaScript 方法提供了一種從多個選擇框中檢索所選值的可靠方法。但是,值得注意的是,在某些情況下,您可能會遇到值和文字屬性的跨瀏覽器相容性問題。為了確保一致的行為,如果瀏覽器相容性是一個主要問題,請考慮使用像 jQuery 這樣的函式庫。
以上是如何在 JavaScript 中從多選元素中檢索選定的值?的詳細內容。更多資訊請關注PHP中文網其他相關文章!