JavaScript 中當前選擇的選項
Kushank Singh
2023年1月30日
2021年10月2日
-
使用
HTMLSelectElement.options
從使用 JavaScript 的選擇列表中獲取當前選項 -
使用
HTMLSelectElement.selectedOptions
從使用 JavaScript 的選擇列表中獲取當前選項
我們可以在網頁中使用不同型別的表單,其中每個欄位都屬於某種型別。有時,我們必須從下拉選單中選擇一個選項。<select>
元素用於建立下拉選單。<select>
標籤內的 <option>
標籤用於定義下拉選單中的選項。
本教程將介紹如何使用 JavaScript 獲取 <select>
元素中當前選定的選項。
使用 HTMLSelectElement.options
從使用 JavaScript 的選擇列表中獲取當前選項
HTMLSelectElement.options
屬性返回 <select>
元素中存在的 <option>
元素的 HtmlOptionsCollections
。
我們可以建立一個函式來顯示列表中所選選項的值。
參考下面的程式碼
HTML 程式碼:
<select id="cars" onchange="select()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
JavaScript 程式碼:
var selection = document.getElementById("cars");
function select() {
alert(selection.options[selection.selectedIndex].value);
}
selectedIndex
返回所選選項的索引。
使用 HTMLSelectElement.selectedOptions
從使用 JavaScript 的選擇列表中獲取當前選項
這個 HTMLSelectElement.selectedOptions
包含在 <select>
元素中定義的所有 <option>
元素的列表,這些元素被選中。
參考下面的程式碼。
HTML 程式碼:
<select id="cars" onchange="select()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
JavaScript 程式碼:
var selection = document.getElementById("cars");
function select() {
alert(selection.selectedOptions[0].value);
}
此方法通常不適用於 Internet Explorer。