DerOption()-Konstruktor erzeugt ein neuesHTMLOptionElement.

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 desHTMLOptionElement darstellt, d.h. das Wertattribut des entsprechenden<option>. Wenn dies nicht angegeben ist, wird der Wert vontext als 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 entwedertrue oderfalse, 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 Standardwertfalse verwendet. Beachten Sie, dass ein Wert vontrue die Option nicht auf ausgewählt setzt, wenn sie nicht bereits ausgewählt ist.

selectedOptional

Ein Wert von entwedertrue oderfalse, 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 ArgumentdefaultSelected wahr 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></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>  <option value="0">zero</option>  <option value="1" selected>one</option>  <option value="2">two</option>  <!-- User will see two as 'selected' --></select>

Spezifikationen

Browser-Kompatibilität