HTMLOptionElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLOptionElement extends HTMLElement

Beschreibung

Das Interface HTMLOptionElement steht für einzelne <option>-Elemente. Es erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt sie um Eigenschaften für Auswahllisten, darunter value, text, label, selected, defaultSelected, disabled, index und form.

Neue Optionen legt man entweder mit document.createElement('option') oder mit dem praktischen Konstruktor new Option(text, value, defaultSelected, selected) an. Der Konstruktor ist besonders nützlich, wenn man eine Auswahlliste dynamisch aus Daten befüllt, etwa aus einer API-Antwort.

Wichtig ist der Unterschied zwischen selected (aktueller Zustand, den der Benutzer ändern kann) und defaultSelected (entspricht dem HTML-Attribut selected und wird beim Zurücksetzen des Formulars wiederhergestellt). Ebenso gilt: Ist kein value-Attribut gesetzt, liefert value den Textinhalt der Option.

Die schreibgeschützte Eigenschaft index gibt die Position innerhalb der zugehörigen <select>-Liste an, form verweist auf das umgebende Formular oder ist null.

Parameter

Name	Typ	Default	Beschreibung
$text	string	""	Nur beim Konstruktor `new Option()`: sichtbarer Text der Option.
$value	string	Wert von text	Wert, der beim Absenden des Formulars übertragen wird.
$defaultSelected	boolean	false	Setzt das HTML-Attribut `selected` (Standardauswahl beim Formular-Reset).
$selected	boolean	false	Aktueller Auswahlzustand direkt nach dem Erzeugen.

Rückgabewert

Typ

HTMLOptionElement

Beschreibung

Beim Aufruf von new Option(...) ein neues, noch nicht ins Dokument eingefügtes <option>-Element.

Beispiele

Auswahlliste dynamisch mit new Option() befüllen

const select = document.createElement('select');
const laender = [
  { code: 'de', name: 'Deutschland' },
  { code: 'at', name: 'Österreich' },
  { code: 'ch', name: 'Schweiz' }
];

for (const { code, name } of laender) {
  // text, value, defaultSelected, selected
  select.add(new Option(name, code, code === 'de', code === 'de'));
}
document.body.append(select);

console.log(select.value, select.options.length);

de 3

Eigenschaften einer Option auslesen

const opt = document.createElement('option');
opt.textContent = 'Premium-Tarif';
console.log(opt.value); // kein value-Attribut → Textinhalt

opt.value = 'premium';
opt.disabled = true;
console.log(opt.value, opt.text, opt.disabled, opt.index, opt.form);

Premium-Tarif premium Premium-Tarif true 0 null

Ausgewählte Optionen einer Mehrfachauswahl ermitteln

const select = document.createElement('select');
select.multiple = true;
['Rot', 'Grün', 'Blau'].forEach((farbe, i) => {
  select.add(new Option(farbe, farbe.toLowerCase(), false, i !== 1));
});

const gewaehlt = Array.from(select.selectedOptions, (o) => o.value);
console.log(gewaehlt);

["rot", "blau"]

selected vs. defaultSelected beim Formular-Reset

const form = document.createElement('form');
const select = document.createElement('select');
select.add(new Option('Klein', 's', true, true));
select.add(new Option('Groß', 'l'));
form.append(select);
document.body.append(form);

select.options[1].selected = true;
console.log(select.value);
form.reset();
console.log(select.value);

l s

// Wichtig · Fallstricke

selected vs. defaultSelected: selected ändert nur den aktuellen Zustand, nicht das HTML-Attribut. Für den Zustand nach form.reset() ist defaultSelected maßgeblich.
Einzelauswahl: Wird in einem normalen <select> (ohne multiple) selected = true gesetzt, verlieren alle anderen Optionen automatisch ihre Auswahl.
Kein change-Event: Programmatische Änderungen an selected lösen kein change- oder input-Event aus. Bei Bedarf manuell mit dispatchEvent(new Event('change')) auslösen.
text vs. textContent: text normalisiert Leerraum (fasst mehrere Leerzeichen zusammen und entfernt sie am Anfang und Ende), textContent nicht.
Sicherheit: Optionstexte aus Benutzer- oder API-Daten immer über new Option(), text oder textContent setzen, nie über innerHTML zusammenbauen. Sonst droht XSS.
Kompatibilität: Der Konstruktor Option() und alle genannten Eigenschaften werden von allen modernen Browsern unterstützt.

Siehe auch

HTMLOptGroupElement HTMLButtonElement HTMLAudioElement HTMLOListElement HTMLOutputElement