<html:select> 页面返回时怎么让它显示我之前选择的值?,HTMLSelectElement - 操作 <select> 元素...

本文详细介绍了HTMLSelectElement接口,包括它的属性、方法和事件,如selectedIndex、options、form、checkValidity等。同时,文章讨论了如何通过监听change事件跟踪用户的选择变化,并提供了各主流浏览器的兼容性表格。此外,还提到了reportValidity()方法用于验证表单元素及其自定义错误消息的设置。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值