HTMLSelectElement.selectedOptions — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLSelectElement.selectedOptions

Beschreibung

Die schreibgeschützte Eigenschaft selectedOptions gibt eine HTMLCollection mit allen <option>-Elementen zurück, die innerhalb eines <select>-Elements gerade ausgewählt sind. Als ausgewählt gilt eine Option, wenn ihre Eigenschaft selected den Wert true hat, egal ob durch Benutzerinteraktion, Skript oder das HTML-Attribut selected.

Am nützlichsten ist die Eigenschaft bei Mehrfachauswahl-Listen (<select multiple>). Dort liefert value bzw. selectedIndex nur die erste ausgewählte Option. Mit selectedOptions kommen Sie direkt an alle gewählten Einträge, ohne selbst über options iterieren und selected prüfen zu müssen.

Die Sammlung ist live: Ändert sich die Auswahl, aktualisiert sich dasselbe Objekt automatisch. Weil eine HTMLCollection kein Array ist, wandeln Sie sie meist mit Array.from() oder dem Spread-Operator um, bevor Sie Methoden wie map() oder filter() verwenden.

Rückgabewert

Typ

HTMLCollection<HTMLOptionElement>

Beschreibung

Live-Sammlung der ausgewählten <option>-Elemente in Dokumentreihenfolge. Ist nichts ausgewählt, ist die Sammlung leer (length === 0).

Beispiele

Alle gewählten Werte einer Mehrfachauswahl auslesen

// HTML: <select id="sprachen" multiple>
//   <option value="js" selected>JavaScript</option>
//   <option value="py">Python</option>
//   <option value="rs" selected>Rust</option>
// </select>
const select = document.querySelector('#sprachen');
const werte = Array.from(select.selectedOptions, (opt) => opt.value);
console.log(werte);

["js", "rs"]

Auswahl bei jeder Änderung anzeigen

const select = document.querySelector('#sprachen');
const ausgabe = document.querySelector('#ausgabe');

select.addEventListener('change', () => {
  const labels = [...select.selectedOptions].map((opt) => opt.textContent.trim());
  ausgabe.textContent = labels.length
    ? `Gewählt: ${labels.join(', ')}`
    : 'Nichts gewählt';
});

Gewählt: JavaScript, Rust

Live-Verhalten der Sammlung

const select = document.querySelector('#sprachen');
const auswahl = select.selectedOptions; // einmal holen
console.log(auswahl.length); // 2

// Python per Skript zusätzlich auswählen
select.options[1].selected = true;
console.log(auswahl.length); // 3 – dieselbe Sammlung, automatisch aktualisiert

2 3

Formularwerte für fetch vorbereiten

const form = document.querySelector('#filter-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const tags = [...form.elements.tags.selectedOptions].map((o) => o.value);
  const params = new URLSearchParams();
  tags.forEach((tag) => params.append('tag', tag));
  const res = await fetch(`/api/artikel?${params}`);
  console.log(res.status, params.toString());
});

200 tag=js&tag=rs

// Wichtig · Fallstricke

Schreibgeschützt: selectedOptions lässt sich nicht zuweisen. Die Auswahl ändern Sie über option.selected = true, select.value oder select.selectedIndex.
Kein Array: HTMLCollection hat kein map(), filter() oder forEach(). Nutzen Sie Array.from() oder [...collection]. for...of funktioniert direkt.
Live-Sammlung: Wenn Sie in einer Schleife über die Sammlung Optionen abwählen, verkleinert sie sich schon während der Schleife und es werden Einträge übersprungen. Deshalb vorher in ein Array kopieren.
Bei einem einfachen <select> ohne multiple enthält die Sammlung höchstens ein Element. Meist ist dort sogar eins ausgewählt, weil der Browser automatisch die erste Option vorwählt.
Deaktivierte Optionen (disabled), die ausgewählt sind, stehen trotzdem in der Sammlung. Beim Absenden des Formulars werden sie aber nicht übertragen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt die Eigenschaft nicht, dort war der Umweg über options und selected nötig.

Siehe auch

HTMLSelectElement.form HTMLSelectElement.selectedIndex HTMLSelectElement.options HTMLSelectElement.labels HTMLSelectElement.length