HTMLSelectElement.options — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLSelectElement.options

Beschreibung

Die schreibgeschützte Eigenschaft options gibt eine HTMLOptionsCollection zurück. Sie enthält alle <option>-Elemente des <select>-Elements in Dokumentreihenfolge. Optionen innerhalb von <optgroup>-Elementen gehören ebenfalls dazu.

Die Collection ist live: Wenn Optionen hinzukommen oder entfernt werden, passt sie sich sofort an. Mit ihr kannst du Optionen über den Index lesen (options[0]), mit options.add() einfügen, mit options.remove(index) entfernen und über options.length die Liste kürzen oder leeren. Auch eine direkte Zuweisung wie options[i] = new Option(...) ist möglich.

Typische Einsatzfälle sind dynamisch befüllte Auswahllisten (z. B. Städte je nach gewähltem Land), das Auslesen aller gewählten Werte bei multiple und das Zurücksetzen einer Liste. Schreibgeschützt ist nur die Eigenschaft selbst: Du kannst ihr keine neue Collection zuweisen, ihren Inhalt aber sehr wohl ändern.

Rückgabewert

Typ

HTMLOptionsCollection

Beschreibung

Live-Collection aller HTMLOptionElement-Objekte des Select-Elements. Sie hat unter anderem length (beschreibbar), selectedIndex, add(), remove(), item() und namedItem().

Beispiele

Alle Optionen auslesen

// <select id="farbe"><option value="r">Rot</option><option value="g">Grün</option><option value="b">Blau</option></select>
const select = document.querySelector('#farbe');

console.log(select.options.length);
for (const opt of select.options) {
  console.log(`${opt.value}: ${opt.text}`);
}

3 r: Rot g: Grün b: Blau

Abhängige Auswahlliste dynamisch befüllen

const staedte = {
  de: ['Berlin', 'Hamburg', 'München'],
  at: ['Wien', 'Graz']
};

const land = document.querySelector('#land');
const stadt = document.querySelector('#stadt');

land.addEventListener('change', () => {
  stadt.options.length = 0; // Liste leeren
  stadt.options.add(new Option('Bitte wählen …', ''));
  for (const name of staedte[land.value] ?? []) {
    stadt.options.add(new Option(name, name.toLowerCase()));
  }
  console.log(`Optionen: ${stadt.options.length}`);
});

Optionen: 4 // nach Auswahl von "de"

Gewählte Werte bei multiple ermitteln

// <select id="tags" multiple>…</select>
const tags = document.querySelector('#tags');

const ausgewaehlt = Array.from(tags.options)
  .filter((opt) => opt.selected)
  .map((opt) => opt.value);

console.log(ausgewaehlt);

['js', 'css']

Option entfernen und einfügen

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

// Zweite Option entfernen
select.options.remove(1);

// Neue Option vor der ersten einfügen
select.options.add(new Option('Schwarz', 'k'), 0);

console.log(Array.from(select.options, (o) => o.text));

['Schwarz', 'Rot', 'Blau']

// Wichtig · Fallstricke

Live-Collection: Wenn du in einer Schleife mit aufsteigendem Index entfernst, verschieben sich die Einträge und es werden Optionen übersprungen. Entferne deshalb rückwärts (for (let i = opts.length - 1; i >= 0; i--)) oder erzeuge vorher mit Array.from() eine Kopie.
HTMLOptionsCollection ist kein Array. Methoden wie map oder filter fehlen. for…of und Array.from() funktionieren trotzdem.
Wird options.length auf einen größeren Wert gesetzt, entstehen leere <option>-Elemente. Ein kleinerer Wert kürzt die Liste.
Für die gewählten Optionen ist select.selectedOptions oft bequemer als eine Filterung über options.
Nutze new Option(text, value) statt innerHTML. Der Text wird dabei nicht als HTML ausgewertet, das schützt bei Nutzerdaten vor XSS.
Die Eigenschaft wird von allen Browsern unterstützt. select.options und select selbst verhalten sich weitgehend gleich: select[0], select.length und select.add() leiten an die Collection weiter.

Siehe auch

HTMLDataListElement.options HTMLSelectElement.form HTMLSelectElement.labels HTMLSelectElement.multiple HTMLSelectElement.size