HTMLOptionElement: Option() コンストラクター
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>
*/
仕様書
Specification |
---|
HTML Standard # dom-option-dev |
ブラウザーの互換性
BCD tables only load in the browser