new Option() — Methode · JavaScript-Referenz

Signatur

new Option(text, value, defaultSelected, selected)

Beschreibung

Der Konstruktor new Option() ist eine kompakte Kurzform, mit der man ein <option>-Element erzeugen kann. Text, Wert und Auswahlzustand lassen sich dabei in einem einzigen Aufruf festlegen. Das Ergebnis ist dasselbe wie bei document.createElement("option") mit anschließendem Setzen von text, value, defaultSelected und selected.

Typische Einsatzfälle sind dynamisch befüllte Auswahllisten: abhängige Dropdowns (etwa Land → Stadt), Optionen aus einer API-Antwort oder das Leeren und Neuaufbauen eines <select>. Das erzeugte Element fügst du am einfachsten mit select.add(option), select.append(option) oder select.options[i] = option ein.

Wichtig ist der Unterschied zwischen den beiden booleschen Parametern: defaultSelected setzt das HTML-Attribut selected. Es legt also den Ausgangszustand fest, auf den ein form.reset() zurückspringt. selected bestimmt dagegen nur den aktuellen Auswahlzustand. Der Text wird als reiner Text gesetzt und nicht als HTML ausgewertet. Deshalb ist der Konstruktor auch bei Daten von Nutzern sicher.

Parameter

Name	Typ	Default	Beschreibung
$text	string	""	Sichtbarer Beschriftungstext der Option (entspricht `option.text`). Wird als Textknoten eingefügt, nicht als HTML.
$value	string	Wert von <code>text</code>	Wert, der beim Absenden des Formulars übermittelt wird (Attribut `value`). Fehlt er, wird beim Absenden der Text verwendet.
$defaultSelected	boolean	false	Setzt das Attribut `selected`, also die Vorauswahl, die auch nach `form.reset()` gilt.
$selected	boolean	false	Aktueller Auswahlzustand. Wenn `true`, ist die Option sofort ausgewählt, ohne dass das HTML-Attribut gesetzt wird.

Rückgabewert

Typ

HTMLOptionElement

Beschreibung

Ein neues, noch nicht ins Dokument eingefügtes HTMLOptionElement.

Beispiele

Einfache Option erzeugen und hinzufügen

const select = document.querySelector("#farbe");

const opt = new Option("Blau", "blue");
select.add(opt);

console.log(opt.outerHTML);
console.log(select.options.length);

<option value="blue">Blau</option> 1 (bei zuvor leerem Select)

Select aus API-Daten befüllen

const citySelect = document.querySelector("#stadt");

const loadCities = async (countryCode) => {
  const res = await fetch(`/api/cities?country=${encodeURIComponent(countryCode)}`);
  const cities = await res.json(); // z. B. [{ id: 1, name: "Berlin" }, ...]

  // Bestehende Optionen entfernen
  citySelect.length = 0;
  citySelect.add(new Option("– Bitte wählen –", "", true, true));

  for (const { id, name } of cities) {
    citySelect.add(new Option(name, String(id)));
  }
};

document.querySelector("#land")
  .addEventListener("change", (e) => loadCities(e.target.value));

defaultSelected vs. selected

const select = document.createElement("select");
const form = document.createElement("form");
form.append(select);

select.add(new Option("Klein", "s", true, false));  // Vorauswahl (Attribut)
select.add(new Option("Groß", "l", false, true));   // aktuell ausgewählt

console.log(select.value);
form.reset();
console.log(select.value);

l s

Nutzertext sicher einfügen

const userInput = '<img src=x onerror=alert(1)>';
const opt = new Option(userInput, "custom");

// Der Text wird nicht als HTML interpretiert
console.log(opt.textContent);
console.log(opt.children.length);

<img src=x onerror=alert(1)> 0

// Wichtig · Fallstricke

Groß-/Kleinschreibung: Der Konstruktor heißt Option (großes O) und muss mit new aufgerufen werden. Ohne new wird ein TypeError ausgelöst.
Nicht verwechseln: defaultSelected (3. Parameter) wirkt über form.reset() hinaus, selected (4. Parameter) nicht. Wer beide auf true setzt, bekommt eine Option, die sowohl vorausgewählt als auch aktuell ausgewählt ist.
Einfachauswahl: Setzt man bei einem <select> ohne multiple mehrere Optionen auf selected, bleibt nur die zuletzt eingefügte ausgewählt.
Leerer Wert: new Option(\"Text\") ohne value übermittelt beim Absenden den Text. Für Platzhalter-Optionen daher ausdrücklich \"\" angeben.
Leistung: Bei sehr vielen Optionen erst in ein DocumentFragment einfügen oder select.replaceChildren(...options) nutzen, damit das Layout nicht bei jeder Option neu berechnet wird.
Sicherheit: Der Text wird als reiner Text behandelt. Das ist sicherer, als Optionen per innerHTML zusammenzubauen, was XSS-Lücken öffnen kann.
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten. In Node.js gibt es den Konstruktor nur mit einer DOM-Umgebung wie jsdom.

Siehe auch

new CSSPositionValue() new Audio() new Animation() new Blob() new DOMPoint()