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 July 2015.
Option()
コンストラクターは、新しい HTMLOptionElement
を生成します。
構文
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 であっても、その選択肢は選択されません。
例
単に新しい選択肢を追加する
/* 以下の 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);
});
様々な引数で選択肢を追加する
/* 以下の 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>
*/
仕様書
Specification |
---|
HTML Standard # dom-option-dev |
ブラウザーの互換性
BCD tables only load in the browser