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 元素。