HTMLSelectElement

例項屬性

此介面繼承了 HTMLElement、Element 和 Node 的屬性。

HTMLSelectElement.autocomplete

一個字串值，反映了 autocomplete 屬性，該屬性指示瀏覽器是否可以自動完成控制元件的值。

HTMLSelectElement.disabled

一個布林值，反映了 disabled HTML 屬性，該屬性指示控制元件是否被停用。如果控制元件被停用，則它不接受單擊。

HTMLSelectElement.form 只讀

一個 HTMLFormElement 物件，引用與此元素關聯的表單。如果元素未與 <form> 元素關聯，則返回 null。

HTMLSelectElement.labels 只讀

一個 NodeList 物件，包含與該元素關聯的 <label> 元素。

HTMLSelectElement.length

一個 unsigned long 值，表示此 select 元素中 <option> 元素的數量。

HTMLSelectElement.multiple

一個布林值，反映了 multiple HTML 屬性，該屬性指示是否可以選擇多個專案。

HTMLSelectElement.name

一個字串，反映了 name HTML 屬性，包含此控制元件在伺服器和 DOM 搜尋函式中使用的名稱。

HTMLSelectElement.options 只讀

一個 HTMLOptionsCollection 物件，表示此元素包含的 <option>（HTMLOptionElement）元素的集合。

HTMLSelectElement.required

一個布林值，反映了 required HTML 屬性，該屬性指示在提交表單之前使用者是否必須選擇一個值。

HTMLSelectElement.selectedIndex

一個 long 值，表示第一個選定 <option> 元素的索引。值為 -1 表示沒有元素被選中。

HTMLSelectElement.selectedOptions 只讀

一個 HTMLCollection 物件，表示已選定的 <option> 元素的集合。

HTMLSelectElement.size

一個 long 值，反映了 size HTML 屬性，該屬性包含控制元件中可見專案的數量。預設值為 1，除非 multiple 為 true，在這種情況下為 4。

HTMLSelectElement.type 只讀

一個字串，表示表單控制元件的型別。當 multiple 為 true 時，返回 "select-multiple"；否則，返回 "select-one"。

HTMLSelectElement.validationMessage 只讀

一個字串，表示本地化的訊息，描述控制元件不滿足的驗證約束（如果有）。如果控制元件不是約束驗證的候選者（willValidate 為 false）或它滿足其約束，則此屬性為空字串。

HTMLSelectElement.validity 只讀

一個 ValidityState 物件，反映了該控制元件的有效性狀態。

HTMLSelectElement.value

一個字串，反映了表單控制元件的值。如果有一個選定的選項元素，則返回第一個選定選項元素的 value 屬性；否則返回空字串。

HTMLSelectElement.willValidate 只讀

一個布林值，指示該按鈕是否是約束驗證的候選者。如果任何條件阻止其進行約束驗證，則此值為 false。

例項方法

此介面繼承了 HTMLElement、Element 和 Node 的方法。

HTMLSelectElement.add()

將一個元素新增到此 select 元素的 option 元素集合中。

HTMLSelectElement.checkValidity()

檢查元素是否具有任何約束以及是否滿足這些約束。如果元素未能滿足其約束，瀏覽器會在元素上觸發一個可取消的 invalid 事件（並返回 false）。

HTMLSelectElement.item()

從此 <select> 元素的選項集合中獲取一個專案。您也可以透過指定方括號或圓括號中的索引來訪問專案，而無需顯式呼叫此方法。

HTMLSelectElement.namedItem()

獲取選項集合中具有指定名稱的專案。名稱字串可以匹配選項節點的 id 或 name 屬性。您也可以透過指定方括號或圓括號中的名稱來訪問專案，而無需顯式呼叫此方法。

HTMLSelectElement.remove()

從此 select 元素的選項集合中移除指定索引處的元素。

HTMLSelectElement.reportValidity()

此方法向用戶報告元素約束中存在的問題（如果有）。如果存在問題，它會在元素上觸發一個可取消的 invalid 事件，並返回 false；如果沒有問題，它返回 true。

HTMLSelectElement.setCustomValidity()

將選擇元素的自定義有效性訊息設定為指定的訊息。使用空字串表示該元素沒有自定義有效性錯誤。

showPicker()

顯示選項選擇器。

事件

此介面繼承了 HTMLElement、Element 和 Node 的事件。

使用 addEventListener() 或將事件監聽器分配給此介面的 oneventname 屬性來監聽這些事件

change 事件

當用戶選擇一個選項時觸發。

input 事件

當 <input>、<select> 或 <textarea> 元素的 value 發生更改時觸發。

示例

獲取有關選定選項的資訊

/* assuming we have the following HTML
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

const select = document.getElementById("s");

// return the index of the selected option
console.log(select.selectedIndex); // 1

// return the value of the selected option
console.log(select.options[select.selectedIndex].value); // Second

跟蹤使用者選擇更改的更好方法是監聽 <select> 元素上發生的 change 事件。這會告訴您值何時更改，然後您可以更新任何需要更新的內容。有關詳細資訊，請參閱 change 事件文件中提供的示例。

規範

瀏覽器相容性

另見

• 實現此介面的 <select> HTML 元素。