HTMLOptionElement: Option()-Konstruktor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der Option()-Konstruktor erzeugt ein neues
HTMLOptionElement.
Syntax
new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)
Parameter
textOptional-
Ein String, der den Inhalt des Elements darstellt, d.h. den angezeigten Text. Wenn dies nicht angegeben ist, wird ein Standardwert von "" (leerer String) verwendet.
valueOptional-
Ein String, der den Wert des
HTMLOptionElementdarstellt, d.h. das Wertattribut des entsprechenden<option>. Wenn dies nicht angegeben ist, wird der Wert vontextals Wert verwendet, z. B. für den Wert des zugehörigen<select>-Elements, wenn das Formular an den Server gesendet wird. defaultSelectedOptional-
Ein Wert von entweder
trueoderfalse, der den Wert desselected-Attributs setzt, d.h. dass diese<option>der Standardwert ist, der im<select>-Element ausgewählt wird, wenn die Seite zum ersten Mal geladen wird. Wenn dies nicht angegeben ist, wird der Standardwertfalseverwendet. Beachten Sie, dass ein Wert vontruedie Option nicht auf ausgewählt setzt, wenn sie nicht bereits ausgewählt ist. selectedOptional-
Ein Wert von entweder
trueoderfalse, der den ausgewählten Zustand der Option setzt; der Standard istfalse(nicht ausgewählt). Wenn weggelassen, wird die Option selbst dann nicht ausgewählt, wenn das ArgumentdefaultSelectedwahr ist.
Beispiele
Einfach neue Optionen hinzufügen
/* assuming we have the following 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);
});
Optionen mit unterschiedlichen Parametern anhängen
<select id="s"></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); // Will add the "selected" attribute
}
if (element === "two") {
s[key] = new Option(element, s.options.length, false, true); // Will actually be selected in the view
}
});
Ergebnis:
<select id="s">
<option value="0">zero</option>
<option value="1" selected>one</option>
<option value="2">two</option>
<!-- User will see two as 'selected' -->
</select>
Spezifikationen
| Specification |
|---|
| HTML # dom-option-dev |
Browser-Kompatibilität
Loading…