HTMLSelectElement

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

此接口继承了 HTMLElement 以及 Element 和 Node 的属性。

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 属性。您还可以通过在方括号或圆括号中指定名称来访问一项，而无需显式调用此方法。

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