11.6 <option> 元素

<option>元素表示下拉框（<select>，<optgroup>或<datalist>）里面的一个选项。它是 HTMLOptionElement 接口的实例。

属性

除了继承 HTMLElement 接口的属性和方法，HTMLOptionElement 接口具有下面的属性。

• disabled：布尔值，表示该项是否可选择。
• defaultSelected：布尔值，表示该项是否默认选中。一旦设为true，该项的值就是<select>的默认值。
• form：返回<option>所在的表单元素。如果不属于任何表单，则返回null。该属性只读。
• index：整数，表示该选项在整个下拉列表里面的位置。该属性只读。
• label：字符串，表示对该选项的说明。如果该属性未设置，则返回该选项的文本内容。
• selected：布尔值，表示该选项是否选中。
• text：字符串，该选项的文本内容。
• value：字符串，该选项的值。表单提交时，上传的就是选中项的这个属性。

Option() 构造函数

浏览器原生提供Option()构造函数，用来生成 HTMLOptionElement 实例。

new Option(text, value, defaultSelected, selected)

它接受四个参数，都是可选的。

• text：字符串，表示该选项的文本内容。如果省略，返回空字符串。
• value：字符串，表示该选项的值。如果省略，默认返回text属性的值。
• defaultSelected：布尔值，表示该项是否默认选中，默认为false。注意，即使设为true，也不代表该项的selected属性为true。
• selected：布尔值，表示该项是否选中，默认为false。

var newOption = new Option('hello', 'world', true);

newOption.text // "hello"
newOption.value // "world"
newOption.defaultSelected // true
newOption.selected // false

上面代码中，newOption的defaultSelected属性为true，但是它没有被选中（即selected属性为false）。

公众号：AI悦创【二维码】