HTMLOptionsCollection — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLOptionsCollection extends HTMLCollection

Beschreibung

Parameter von remove() und item(): nullbasierte Position der Option.

Beispiele

Sammlung abrufen und auslesen

// <select id="land"><option value="de">Deutschland</option><option value="at" selected>Österreich</option></select>
const select = document.querySelector('#land');
const options = select.options; // HTMLOptionsCollection

console.log(options.length);
console.log(options.selectedIndex);
console.log(options[options.selectedIndex].value);

// In ein Array umwandeln, um map() zu nutzen
const werte = Array.from(options, (opt) => opt.value);
console.log(werte);

2 1 at ["de", "at"]

Dropdown dynamisch aus API-Daten befüllen

const fillSelect = async (select) => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  select.options.length = 0; // alle bisherigen Optionen löschen
  select.options.add(new Option('Bitte wählen …', ''));

  for (const user of users) {
    // new Option(text, value, defaultSelected, selected)
    select.options.add(new Option(user.name, user.id));
  }
  console.log(`${select.options.length} Optionen geladen`);
};

fillSelect(document.querySelector('#benutzer'));

11 Optionen geladen

Einfügen an Position, Entfernen und Ersetzen

const select = document.createElement('select');
const opts = select.options;

opts.add(new Option('Rot', 'r'));
opts.add(new Option('Blau', 'b'));
opts.add(new Option('Grün', 'g'), 1); // vor Index 1 einfügen

opts[0] = new Option('Gelb', 'y');   // Index 0 ersetzen
opts.remove(2);                      // 'Blau' entfernen
opts.selectedIndex = 1;

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

["Gelb", "Grün"] g

Alle ausgewählten Werte einer Mehrfachauswahl ermitteln

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

select.addEventListener('change', () => {
  const gewaehlt = [...select.options]
    .filter((opt) => opt.selected)
    .map((opt) => opt.value);
  console.log('Ausgewählt:', gewaehlt);
});

Ausgewählt: ["js", "css"]

// Wichtig · Fallstricke

Die Sammlung ist live: Wer in einer Vorwärtsschleife mit remove(i) löscht, überspringt Einträge, weil die folgenden Elemente nachrücken. Deshalb rückwärts iterieren oder vorher eine Kopie mit Array.from() anlegen.
Kein echtes Array: Methoden wie map, filter und forEach fehlen. Die Sammlung ist aber iterierbar, for…of und der Spread-Operator funktionieren also.
Wird length auf einen Wert über 100.000 gesetzt, ignorieren Browser die Zuweisung stillschweigend. Sehr große Werte sind ohnehin schlecht für die Leistung.
Für eine Mehrfachauswahl ist select.selectedOptions (eine HTMLCollection) oft bequemer als eine eigene Filterung. selectedIndex liefert nur die erste ausgewählte Option.
add() wirft einen HierarchyRequestError, wenn das Element ein Vorfahre des <select> ist, und einen NotFoundError, wenn before kein Nachfahre des <select> ist.
Sicherheit: Mit new Option(text, value) werden Texte sicher als Text gesetzt. Optionen per innerHTML aus Nutzerdaten zusammenzubauen, öffnet dagegen XSS-Lücken.
Kompatibilität: Wird von allen modernen Browsern unterstützt. HTMLSelectElement selbst bietet ebenfalls add() und remove(index) an.

Siehe auch

HTMLAllCollection HTMLCollection HTMLFormControlsCollection HTMLOptionElement GeolocationPosition