HTMLSelectElement.add()

HTMLSelectElement.add() 方法用于向 select 元素的 option 元素集合中添加一个元素。

语法

collection.add(item[, before]);

参数

  • item 是一个 HTMLOptionElementHTMLOptGroupElement
  • before 是可选的,是集合中的一个元素或者类型为 long 的一个索引,表示上面的 item 在此之前插入。如果这个参数是 null(或索引不存在),新元素会添加在集合的末尾。

异常

示例

从零开始创建元素

var sel = document.createElement("select");
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

/*
  概念上与下述代码相同:

  <select>
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>
*/

before 参数是可选的,因此也可以这样写:

...
sel.add(opt1);
sel.add(opt2);
...

添加到已存在集合的末尾

var sel = document.getElementById("existingList");

var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, null);

/*
  获取这个已存在的 select 对象:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  将其变成这样:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
    <option value="3">Option: Value 3</option>
  </select>
*/

同样,before 参数是可选的,因此也可以这样写:

...
sel.add(opt);
...

插入到已存在的集合中间

var sel = document.getElementById("existingList");

var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/*
  获取这个已存在的 select 对象:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  将其变成这样:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="3">Option: Value 3</option>
    <option value="2">Option: Value 2</option>
  </select>
*/

规范

规范 状态 注释
HTML Living Standard
HTMLSelectElement.add()
Living Standard
HTML5
HTMLSelectElement.add()
Recommendation HTML Living Standard 的一个快照(snapshot)。
before 的值为 long 类型,且可选。如果传入的 item 是 HTMLSelectElement 的祖先元素,HierarchyRequestError 类型的 DOMError 会被抛出。不传入 before 参数时不再抛出异常。
Document Object Model (DOM) Level 2 HTML Specification
HTMLSelectElement.add()
Obsolete 如果 before 参数不是这个元素的子代,会抛出 NOT_FOUND_ERR 异常。
Document Object Model (DOM) Level 1 Specification
HTMLSelectElement.add()
Obsolete 初始定义。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
addChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Index as before parameterChrome Full support YesEdge Full support 12Firefox Full support 7IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 7Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support