JavaScript 中當前選擇的選項

1. 使用 HTMLSelectElement.options 從使用 JavaScript 的選擇列表中獲取當前選項
2. 使用 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。