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 July 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

text Optional: 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.
value Optional: Ein String, der den Wert des HTMLOptionElement darstellt, d.h. das Wertattribut des entsprechenden <option>. Wenn dies nicht angegeben ist, wird der Wert von text als Wert verwendet, z. B. für den Wert des zugehörigen <select>-Elements, wenn das Formular an den Server gesendet wird.
defaultSelected Optional: Ein Wert von entweder true oder false, der den Wert des selected-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 Standardwert false verwendet. Beachten Sie, dass ein Wert von true die Option nicht auf ausgewählt setzt, wenn sie nicht bereits ausgewählt ist.
selected Optional: Ein Wert von entweder true oder false, der den ausgewählten Zustand der Option setzt; der Standard ist false (nicht ausgewählt). Wenn weggelassen, wird die Option selbst dann nicht ausgewählt, wenn das Argument defaultSelected 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

html

<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: