HTMLOptionElement.defaultSelected — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptionElement.defaultSelected

Beschreibung

Die Eigenschaft defaultSelected ist ein boolescher Wert, der das HTML-Attribut selected eines <option>-Elements widerspiegelt. Sie gibt also an, ob die Option ursprünglich (laut Markup) ausgewählt ist, und nicht, ob sie gerade ausgewählt ist. Setzt man sie auf true, wird das Attribut selected hinzugefügt; bei false wird es entfernt.

Der aktuelle Auswahlzustand steht dagegen in HTMLOptionElement.selected. Wählt der Benutzer eine andere Option, ändert sich selected, defaultSelected bleibt aber gleich. Beim Zurücksetzen des Formulars (form.reset() oder <button type="reset">) stellt der Browser die Auswahl anhand von defaultSelected wieder her.

Typische Einsatzfälle sind: Erkennen, ob ein Formular gegenüber dem Ausgangszustand verändert wurde („ungespeicherte Änderungen“), dynamisches Festlegen eines neuen Standardwerts nach dem Speichern sowie das Erzeugen von Optionen per new Option(text, value, defaultSelected, selected).

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element das Attribut selected besitzt, sonst false. Beschreibbar: Zuweisen setzt bzw. entfernt das Attribut.

Beispiele

Standardauswahl vs. aktuelle Auswahl

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

at.selected = true; // Benutzer wählt Österreich

console.log(de.defaultSelected, de.selected);
console.log(at.defaultSelected, at.selected);

true false false true

Ungespeicherte Änderungen in einem Select erkennen

const isSelectDirty = (select) =>
  [...select.options].some((opt) => opt.selected !== opt.defaultSelected);

const select = document.querySelector('#land');
select.addEventListener('change', () => {
  console.log(isSelectDirty(select) ? 'Geändert' : 'Unverändert');
});

Geändert

Neuen Standardwert nach dem Speichern festlegen

const form = document.querySelector('#einstellungen');
const select = form.elements.namedItem('sprache');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  await fetch('/api/settings', { method: 'POST', body: new FormData(form) });

  // Aktuelle Auswahl wird zum neuen Standard – reset() kehrt jetzt hierhin zurück
  for (const opt of select.options) {
    opt.defaultSelected = opt.selected;
  }
});

Option per Konstruktor mit Standardauswahl erzeugen

const select = document.createElement('select');
// new Option(text, value, defaultSelected, selected)
select.add(new Option('Klein', 's'));
select.add(new Option('Mittel', 'm', true, true));
select.add(new Option('Groß', 'l'));

console.log(select.value);
console.log(select.options[1].outerHTML);

m <option value="m" selected="">Mittel</option>

// Wichtig · Fallstricke

Nicht mit selected verwechseln: defaultSelected ändert sich nicht durch Benutzerinteraktion. Wer die aktuelle Auswahl lesen will, braucht selected bzw. select.value.
Nebeneffekt beim Setzen: Setzt man defaultSelected = true bei einem Element, dessen Auswahl noch nicht verändert wurde (Auswahl nicht „dirty“), kann der Browser auch die aktuelle Auswahl anpassen. Hat der Benutzer bereits gewählt, bleibt selected unverändert.
Bei einem <select> ohne multiple können mehrere Optionen defaultSelected sein; ausgewählt angezeigt wird dann die letzte davon.
Haben keine Optionen defaultSelected, wählt ein einfaches <select> beim Zurücksetzen die erste nicht deaktivierte Option.
Kompatibilität: wird seit jeher von allen Browsern unterstützt (DOM Level 1).

Siehe auch

HTMLOptionElement.selected HTMLSelectElement.selectedIndex HTMLInputElement.defaultChecked HTMLFormElement.reset() HTMLOptionElement HTMLOptionElement.form