HTMLSelectElement - 操作 <select> 元素

HTMLSelectElement 接口表示 <select> HTML 元素。该元素还通过 HTMLElement 接口共享其他 HTML 元素的所有属性和方法。

属性

该接口继承 HTMLElement，Element 和 Node 的属性。

HTMLSelectElement.autofocus

一个 Boolean，反映了 autofocus HTML 属性，指示控件在页面加载时是否应该具有输入焦点，除非用户覆盖它，例如，通过键入不同的控件。文档中只有一个与表单相关的元素可以指定此属性。

HTMLSelectElement.disabled

一个 Boolean，反映了disabled HTML 属性，它指示控件是否被禁用。如果已禁用，则不能被点击。

HTMLSelectElement.form

一个 HTMLFormElement，表示与此元素关联的表单。如果元素与 <form> 元素没有关联，则返回 null。

HTMLSelectElement.labels只读

与该元素关联的 <label> 元素组成的 NodeList。

HTMLSelectElement.length

一个 unsigned long，表示该 select 元素中 <option> 元素的数量。

HTMLSelectElement.multiple

一个 Boolean，反映了 multiple HTML 属性，指示是否可以选择多个项目。

HTMLSelectElement.name

一个 DOMString，反映了 name HTML 属性，包含服务器和 DOM 搜索功能使用的此控件的名称。

HTMLSelectElement.options 只读

一个 HTMLOptionsCollection，表示此元素包含的 <option> 元素集。

HTMLSelectElement.required

一个 Boolean，反映了 required HTML 属性，指示用户在提交表单之前是否需要选择值。

HTMLSelectElement.selectedIndex

一个 long，反映了第一个选定的 <option> 元素的索引。值 -1 表示未选择任何元素。

HTMLSelectElement.selectedOptions只读

一个 HTMLCollection，表示所选的 <option> 元素集。

HTMLSelectElement.size

一个 long，反映了 size HTML 属性，它包含控件中可见项的数量。默认值为 1，如果 multiple 为 true，则为 4。

HTMLSelectElement.type只读

一个 DOMString ，表示表单控件类型。当 multiple 为 true 是，它返回 "select-multiple"，否则返回 "select-one"。

HTMLSelectElement.validationMessage只读

一个 DOMString，表示一个本地化消息，描述了控件不满足的验证约束（如果有的话）。如果控件不是约束验证的候选者（willValidate 为 false），或者它满足其约束，则此属性为空字符串。

HTMLSelectElement.validity只读

一个 ValidityState，反映了该控件所处的有效状态。

HTMLSelectElement.value

一个 DOMString，反映了表单控件的值（第一个选中的选项）。返回 option 元素的 value 属性，如果没有该属性，则返回 text 属性。

HTMLSelectElement.willValidate只读

一个 Boolean，指示该按钮是否是约束验证的候选者。如果任何条件禁止约束验证，则为 false。

方法

该接口继承了 HTMLElement，Element 和 Node 的方法。

HTMLSelectElement.add()

将一个元素添加到该 select 元素的 option 元素集合中。

HTMLSelectElement.blur()

从此元素中删除输入焦点。 此方法现在在 HTMLElement 上实现

HTMLSelectElement.checkValidity()

检查元素是否有任何约束以及它是否满足它们。如果元素未通过约束，浏览器将在元素处触发可取消的 invalid 事件（并返回 false）。

HTMLSelectElement.focus()

为此元素提供输入焦点。 此方法现在在 HTMLElement 上实现。

HTMLSelectElement.item()

从此 <select> 元素的 options 集合中获取一个项目。您还可以通过在数组样式括号或括号中指定索引来访问项目，而无需显式调用此方法。

HTMLSelectElement.namedItem()

获取具有指定名称的 options 集合中的项。名称字符串可以匹配选项节点的 id 或 name 属性。您还可以通过在数组样式括号或括号中指定名称来访问项目，而无需显式调用此方法。

HTMLSelectElement.remove()

从 select 元素的 options 集合中删除指定索引处的元素。

reportValidity()

此方法向用户报告元素约束的问题（如果有的话）。如果有问题，它会在元素处触发可取消的 invalid 事件，并返回 false；如果没有问题，则返回 true。

HTMLSelectElement.setCustomValidity()

将 select 元素的自定义有效性消息设置为指定的消息。如果此消息不是空字符串，则表示该元素是自定义有效性错误状态，并且不通过验证。

事件

使用 addEventListener() 或通过为此接口的 oneventname 属性分配事件监听器来监听这些事件：

input 事件

当 <input>，<select> 或 <textarea> 元素的 value 发生更改时触发。

实例

获取有关所选选项的信息

/* 假设我们有以下 HTML
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

var select = document.getElementById('s');

// 返回所选选项的索引
console.log(select.selectedIndex); // 1

// 返回所选选项的值
console.log(select.options[select.selectedIndex].value) // Second

跟踪用户更改选择的更好方法是观察在 <select> 上发生的 change 事件。这将告诉您何时值发生变化，然后您可以更新所需的任何内容。有关详细信息，请参阅 change 事件的文档中的提供的实例。

规范

规范	状态	备注
HTML Living Standard HTMLSelectElement 的定义	现行的标准	从最新的快照 HTML5 以来，它添加了 autocomplete 属性和 reportValidity() 方法。
HTML5 HTMLSelectElement 的定义	推荐	是 HTML Living Standard 的快照。 它添加了 autofocus ，form，required，labels，selectedOptions，willValidate，validity 和 validationMessage 属性。 tabindex 属性和 blur()，focus() 方法已移至 HTMLElement 中。增加了 item()，namedItem()，checkValidity() 和 setCustomValidity() 方法。
Document Object Model (DOM) Level 2 HTML Specification HTMLSelectElement 的定义	已过时	options 现在返回 HTMLOptionsCollection。 length 现在返回一个 unsigned long。
Document Object Model (DOM) Level 1 Specification HTMLSelectElement 的定义	已过时	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. You should watch for change events on <select> instead of watching <option> elements for events. See bug 1090602 and Multiprocess Firefox Web content compatibility for details.

2. namedItem does not appear to take the name attribute into account (only the id attribute) on Internet Explorer and Edge. There is a bug report to Microsoft about this.

相关链接

• 实现该接口的 HTML 元素 <select>。