HTMLSelectElement.add()

HTMLSelectElement.add() メソッドは、この select 要素が持つ option 要素の集合に要素を追加します。

構文

collection.add(item[, before]);

引数

  • item は HTMLOptionElement または HTMLOptGroupElement (en-US) です
  • before は省略可能で、集合内の要素または long 型の位置を指定し、item を挿入する直後のい位置を表します。この引数が null (または存在しない位置) であった場合、新しい要素は集合の末尾に追加されます。

例外

HierarchyRequestError DOMException

このメソッドに渡された item が HTMLSelectElement の祖先であった場合に発生します。

例

一から要素を作成

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

仕様書

Specification
HTML Standard
# dom-select-add-dev

ブラウザーの互換性

BCD tables only load in the browser