当前位置：文江博客知识库 en-US 文档 Web API HTMLSelectElement add

HTMLSelectElement.add() - Web APIs 编辑

The HTMLSelectElement.add() method adds an element to the collection of option elements for this select element.

Syntax

collection.add(item[, before]);

Parameters

item is an HTMLOptionElement or HTMLOptGroupElement
before is optional and an element of the collection, or an index of type long, representing the item should be inserted before. If this parameter is null (or the index does not exist), the new element is appended to the end of the collection.

Exceptions

A DOMError of the type HierarchyRequestError if the item passed to the method is an ancestor of the HTMLSelectElement.

Examples

Creating Elements from Scratch

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);

/*
  Produces the following, conceptually:

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

The before parameter is optional. So the following is accepted.

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

Append to an Existing Collection

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

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

sel.add(opt, null);

/*
  Takes the existing following select object:

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

  And changes it to:

  <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>
*/

The before parameter is optional. So the following is accepted.

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

Inserting to an Existing Collection

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

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

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

/*
  Takes the existing following select object:

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

  And changes it to:

  <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>
*/

Specifications

Specification	Status	Comment
HTML Living Standard The definition of 'HTMLSelectElement.add()' in that specification.	Living Standard
HTML5 The definition of 'HTMLSelectElement.add()' in that specification.	Recommendation	Is a snapshot of HTML Living Standard. The value of `before` can now be a long and is optional. It throws a `DOMError` of the type `HierarchyRequestError` if the passed `item` is an ancestor of the `HTMLSelectElement` and no longer throws if the `before` parameter is not found.
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLSelectElement.add()' in that specification.	Obsolete	The method now throws an NOT_FOUND_ERR exception if the item of the `before` parameter is not a child of this element.
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLSelectElement.add()' in that specification.	Obsolete	Initial definition