HTMLOptionElement.selected — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptionElement.selected

Beschreibung

Die Eigenschaft selected des Interfaces HTMLOptionElement ist ein boolescher Wert und gibt den aktuellen Auswahlzustand eines <option>-Elements wieder. Sie ist lesend und schreibend nutzbar: Mit option.selected = true wählst du eine Option per Skript aus, mit false hebst du die Auswahl auf.

Wichtig ist der Unterschied zum HTML-Attribut selected: Das Attribut legt nur die Vorauswahl fest und entspricht der Eigenschaft defaultSelected. Die Eigenschaft selected ändert sich dagegen, sobald der Benutzer etwas anderes auswählt. Setzt du selected per Skript, wird das Attribut im Markup nicht verändert; ein form.reset() stellt deshalb wieder den Zustand aus defaultSelected her.

Besonders nützlich ist selected bei Mehrfachauswahl-Listen (<select multiple>), bei denen select.value nur den ersten ausgewählten Wert liefert. Über die Optionen iterieren und selected prüfen ist dort der klassische Weg, alle gewählten Werte zu ermitteln – alternativ bietet sich select.selectedOptions an.

Bei einer Einfachauswahl-Liste führt option.selected = true automatisch dazu, dass alle anderen Optionen abgewählt werden. Bei multiple bleiben die übrigen Auswahlen erhalten.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Option aktuell ausgewählt ist, sonst false. Beim Setzen wird der Wert in einen booleschen Wert umgewandelt.

Beispiele

Auswahlzustand auslesen und Option per Skript auswählen

// <select id="land"><option value="de">Deutschland</option><option value="at">Österreich</option><option value="ch">Schweiz</option></select>
const select = document.querySelector('#land');
const [de, at, ch] = select.options;

console.log(de.selected); // erste Option ist standardmäßig gewählt

ch.selected = true; // Schweiz auswählen
console.log(de.selected, ch.selected);
console.log(select.value);

true false true ch

Alle gewählten Werte einer Mehrfachauswahl ermitteln

// <select id="tags" multiple>
//   <option value="js" selected>JavaScript</option>
//   <option value="css">CSS</option>
//   <option value="html" selected>HTML</option>
// </select>
const tags = document.querySelector('#tags');

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

console.log(gewaehlt);

["js", "html"]

Alle auswählen / Auswahl aufheben

const tags = document.querySelector('#tags');

const setzeAlle = (zustand) => {
  for (const opt of tags.options) {
    opt.selected = zustand;
  }
  // change-Event wird NICHT automatisch ausgelöst
  tags.dispatchEvent(new Event('change', { bubbles: true }));
};

document.querySelector('#alle').addEventListener('click', () => setzeAlle(true));
document.querySelector('#keine').addEventListener('click', () => setzeAlle(false));

selected vs. defaultSelected nach Benutzeränderung

// <option value="at" selected>Österreich</option> ist vorausgewählt
const select = document.querySelector('#land');
const at = select.querySelector('option[value="at"]');
const ch = select.querySelector('option[value="ch"]');

ch.selected = true;
console.log(at.selected, at.defaultSelected);

select.form?.reset();
console.log(at.selected); // nach reset wieder vorausgewählt (falls in einem Formular)

false true true

// Wichtig · Fallstricke

Attribut ≠ Eigenschaft: Das HTML-Attribut selected spiegelt defaultSelected wider, nicht den aktuellen Zustand. setAttribute('selected', '') ändert die Vorauswahl und kann – solange der Benutzer nichts geändert hat – auch die aktuelle Auswahl beeinflussen, ist aber nicht der zuverlässige Weg. Nutze für die aktuelle Auswahl immer die Eigenschaft.
Keine Events: Das Setzen von selected per Skript löst weder change noch input aus. Frameworks oder eigene Listener bekommen die Änderung nur mit, wenn du das Event selbst per dispatchEvent() auslöst.
Einfachauswahl: Bei <select> ohne multiple (und size ≤ 1) ist immer eine Option gewählt; selected = false auf der aktiven Option führt dazu, dass wieder die erste nicht deaktivierte Option ausgewählt wird bzw. selectedIndex auf -1 fällt – je nach Kontext. Zum gezielten Leeren besser select.selectedIndex = -1 verwenden.
Deaktivierte Optionen (disabled) können per Skript trotzdem auf selected = true gesetzt werden, werden aber beim Absenden des Formulars nicht übertragen.
Die Eigenschaft wird von allen Browsern seit Langem einheitlich unterstützt.

Siehe auch

HTMLOptGroupElement.disabled HTMLOptionElement.disabled HTMLOptionElement.label HTMLOptionElement.text HTMLOptionElement.value