HTMLOptionElement: Option() コンストラクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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> 要素の値として使用されます。

defaultSelected 省略可

true または false のどちらかの値で、selected 属性の値を設定するものです。すなわち、ページが最初に読み込まれたときに、この <option> が <select> 要素で選択される既定値になるようにします。これが指定されていない場合は、既定値の false が使用されます。なお、 true を指定しても、その選択肢が selected でない場合は選択状態にはなりません。

selected 省略可

true または false のどちらかの値で、その選択肢の選択状態を設定します。既定値は false（未選択）です。省略された場合、defaultSelected 引数が true であっても、その選択肢は選択されません。

例

単に新しい選択肢を追加する

js
/* 以下の 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
/* 以下の 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); // "selected" 属性を追加
  }
  if (element === "two") {
    s[key] = new Option(element, s.options.length, false, true); // "view" の中で選択状態になる
  }
});

/* 結果
<select id="s">
  <option value="0">zero</option>
  <option value="1" selected="">one</option>
  <option value="2">two</option> // ユーザーにはこれが 'selected' に見える
</select>
*/