JavaScript 中當前選擇的選項

Kushank Singh 2023年1月30日 2021年10月2日
  1. 使用 HTMLSelectElement.options 從使用 JavaScript 的選擇列表中獲取當前選項
  2. 使用 HTMLSelectElement.selectedOptions 從使用 JavaScript 的選擇列表中獲取當前選項
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。