HTMLSelectElement 接口表示 HTML 元素。该元素还通过 HTMLElement 接口共享其他 HTML 元素的所有属性和方法。
属性
一个 Boolean,反映了
一个 Boolean,反映了
HTMLSelectElement.form
一个 HTMLFormElement,表示与此元素关联的表单。如果元素与
元素没有关联,则返回 null。一个 unsigned long,表示该 select 元素中 元素的数量。
一个 Boolean,反映了
一个 DOMString,反映了
一个 Boolean,反映了
一个 long,反映了第一个选定的 元素的索引。值 -1 表示未选择任何元素。
一个 long,反映了 1,如果 multiple 为 true,则为 4。
一个 DOMString ,表示表单控件类型。当 multiple 为 true 是,它返回 "select-multiple",否则返回 "select-one"。
一个 DOMString,表示一个本地化消息,描述了控件不满足的验证约束(如果有的话)。如果控件不是约束验证的候选者(willValidate 为 false),或者它满足其约束,则此属性为空字符串。
一个 ValidityState,反映了该控件所处的有效状态。
一个 DOMString,反映了表单控件的值(第一个选中的选项)。返回 option 元素的 value 属性,如果没有该属性,则返回 text 属性。
一个 Boolean,指示该按钮是否是约束验证的候选者。如果任何条件禁止约束验证,则为 false。
方法
将一个元素添加到该 select 元素的 option 元素集合中。
从此元素中删除输入焦点。
检查元素是否有任何约束以及它是否满足它们。如果元素未通过约束,浏览器将在元素处触发可取消的 false)。
为此元素提供输入焦点。
从此 元素的 options 集合中获取一个项目。您还可以通过在数组样式括号或括号中指定索引来访问项目,而无需显式调用此方法。
获取具有指定名称的 options 集合中的项。名称字符串可以匹配选项节点的 id 或 name 属性。您还可以通过在数组样式括号或括号中指定名称来访问项目,而无需显式调用此方法。
从 select 元素的 options 集合中删除指定索引处的元素。
reportValidity()
此方法向用户报告元素约束的问题(如果有的话)。如果有问题,它会在元素处触发可取消的 invalid 事件,并返回 false;如果没有问题,则返回 true。
将 select 元素的自定义有效性消息设置为指定的消息。如果此消息不是空字符串,则表示该元素是自定义有效性错误状态,并且不通过验证。
事件
使用 addEventListener() 或通过为此接口的 oneventname 属性分配事件监听器来监听这些事件:
实例
获取有关所选选项的信息
/* 假设我们有以下 HTML
First
Second
Third
*/
var select = document.getElementById('s');
// 返回所选选项的索引
console.log(select.selectedIndex); // 1
// 返回所选选项的值
console.log(select.options[select.selectedIndex].value) // Second
跟踪用户更改选择的更好方法是观察在 上发生的 change 事件的文档中的提供的实例。
规范
规范
状态
备注现行的标准
从最新的快照 HTML5 以来,它添加了 autocomplete 属性和 reportValidity() 方法。
推荐
是 HTML Living Standard 的快照。
它添加了 autofocus ,form,required,labels,selectedOptions,willValidate,validity 和 validationMessage 属性。
tabindex 属性和 blur(),focus() 方法已移至 HTMLElement 中。增加了 item(),namedItem(),checkValidity() 和 setCustomValidity() 方法。
桌面浏览器兼容性
特性ChromeEdgeFirefoxInternet ExplorerOperaSafari基础支持1122121
add支持12支持支持支持支持
autocomplete66≤79支持不支持支持支持
autofocus支持12支持10支持支持
blur未知未知未知未知未知未知
checkValidity41241095
disabled支持12支持99支持
focus未知未知未知未知未知未知
form支持12支持支持支持支持
item支持124支持支持支持
labels141856不支持支持支持
length支持12支持未知支持支持
multiple支持12支持未知支持支持
name支持12支持未知支持支持
namedItem支持124支持支持支持
options支持12支持支持支持支持
remove支持12支持支持支持支持
reportValidity401749不支持2710
required支持12支持未知支持支持
selectedIndex支持12支持未知支持支持
selectedOptions191226不支持96
setCustomValidity支持124支持支持支持
size支持12支持未知支持支持
type1122121
validationMessage支持124支持支持支持
validity支持124支持支持支持
value支持12支持未知支持支持
willValidate支持124支持支持支持
移动浏览器兼容性
特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari基础支持118未知4未知10.11
add支持支持未知支持未知支持支持
autocomplete6666未知支持未知支持支持
autofocus支持支持未知4未知不支持不支持
blur未知未知未知未知未知未知未知
checkValidity≤3718未知4未知10.14.2
disabled支持支持未知支持未知支持支持
focus未知未知未知未知未知未知未知
form支持支持未知支持未知支持支持
item支持支持未知4未知支持支持
labels支持支持未知56未知支持支持
length支持支持未知支持未知支持支持
multiple支持支持未知支持未知支持支持
name支持支持未知支持未知支持支持
namedItem支持支持未知4未知支持支持
options支持支持未知支持未知支持支持
remove支持支持未知支持未知支持支持
reportValidity4040未知64未知2710
required支持支持未知支持未知支持支持
selectedIndex支持支持未知支持未知支持支持
selectedOptions≤3725未知26未知10.16
setCustomValidity支持支持未知4未知支持支持
size支持支持未知支持未知支持支持
type118未知4未知10.11
validationMessage支持支持未知4未知支持支持
validity支持支持未知4未知支持支持
value支持支持未知支持未知支持支持
willValidate支持支持未知4未知支持支持
1. You should watch for change events on instead of watching 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 元素 。