HTMLOptionElement: Option() 构造函数

基线 广泛可用

此功能已经很成熟，可以在许多设备和浏览器版本中使用。它已在所有浏览器中可用，从 2015 年 7 月.

Option() 构造函数创建一个新的 HTMLOptionElement。

语法

js
new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)

参数

text 可选

一个字符串，表示元素的内容，即显示的文本。如果未指定，则使用默认值 ""（空字符串）。

value 可选

一个字符串，表示 HTMLOptionElement 的值，即等效的 <option> 的 value 属性。如果未指定，则使用 text 的值作为 value，例如，当表单提交到服务器时，为关联的 <select> 元素的 value。

defaultSelected 可选

一个值为 true 或 false 的值，用于设置 selected 属性值，即，使此 <option> 成为页面首次加载时 <select> 元素中选定的默认值。如果未指定，则使用默认值 false。请注意，如果选项尚未选中，则值为 true 不会将选项设置为选中。

selected 可选

一个值为 true 或 false 的值，用于设置选项的选中状态；默认值为 false（未选中）。如果省略，即使 defaultSelected 参数为 true，选项也不会被选中。

示例

只需添加新选项

js
/* assuming we have the following HTML
<select id='s'>

</select>
*/

const s = document.getElementById("s");
const options = [Four, Five, Six];

options.forEach((element, key) => {
  s[key] = new Option(element, key);
});

使用不同的参数追加选项

js
/* assuming we have the following HTML
<select id="s">
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
</select>
*/

const s = document.getElementById("s");
const options = ["zero", "one", "two"];

options.forEach((element, key) => {
  if (element === "zero") {
    s[key] = new Option(element, s.options.length, false, false);
  }
  if (element === "one") {
    s[key] = new Option(element, s.options.length, true, false); // Will add the "selected" attribute
  }
  if (element === "two") {
    s[key] = new Option(element, s.options.length, false, true); // Just will be selected in "view"
  }
});

/* Result
<select id="s">
  <option value="0">zero</option>
  <option value="1" selected="">one</option>
  <option value="2">two</option> // User will see this as 'selected'
</select>
*/

规范

规范
HTML 标准
# dom-option-dev

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。