HTMLSelectElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLSelectElement extends HTMLElement

Beschreibung

HTMLSelectElement ist die DOM-Schnittstelle für Auswahllisten (<select>). Sie erbt von HTMLElement und ergänzt Eigenschaften speziell für Formularsteuerelemente: value, selectedIndex, options, selectedOptions, multiple, size, length, disabled, required, name, form und labels.

Wichtige Methoden sind add(option, before) und remove(index) zum dynamischen Befüllen, item(index) und namedItem(name) für den Zugriff auf Optionen sowie die Validierungsmethoden checkValidity(), reportValidity() und setCustomValidity(). Neuere Browser unterstützen außerdem showPicker(), um die Auswahlliste per Skript zu öffnen.

Man nutzt die Schnittstelle, wenn Auswahllisten abhängig von anderen Eingaben befüllt werden (z. B. Land → Bundesland), Werte aus API-Antworten geladen werden oder Mehrfachauswahlen ausgewertet werden müssen. Auf Änderungen reagiert man mit dem change-Event (bei Auswahl) bzw. input-Event.

Instanzen entstehen nicht per Konstruktor, sondern über document.createElement("select") oder durch Abfrage vorhandener Elemente, z. B. mit document.querySelector("select").

Parameter

Name	Typ	Default	Beschreibung
$value	string		Wert der ersten ausgewählten Option; beim Setzen wird die Option mit passendem `value` ausgewählt.
$selectedIndex	number	-1 bei leerer Liste	Index der ersten ausgewählten Option; `-1` hebt jede Auswahl auf.
$options	HTMLOptionsCollection		Live-Sammlung aller `<option>`-Elemente (inkl. solcher in `<optgroup>`).
$selectedOptions	HTMLCollection		Live-Sammlung der aktuell ausgewählten Optionen – wichtig bei `multiple`.
$multiple	boolean	false	Erlaubt die Auswahl mehrerer Optionen.
$length	number		Anzahl der Optionen; Setzen auf einen kleineren Wert entfernt Optionen am Ende.
$add(element, before)	(HTMLOptionElement\|HTMLOptGroupElement, HTMLElement\|number\|null) => void	before = null	Fügt eine Option oder Gruppe ein – am Ende oder vor dem angegebenen Element/Index.
$remove(index)	(number) => void		Entfernt die Option am angegebenen Index. Ohne Argument entfernt es (von `Element` geerbt) das ganze `<select>`.

Rückgabewert

Typ

HTMLSelectElement

Beschreibung

Objekt, das ein <select>-Element im DOM repräsentiert.

Beispiele

Select erzeugen und mit API-Daten befüllen

const laender = [
  { code: "de", name: "Deutschland" },
  { code: "at", name: "Österreich" },
  { code: "ch", name: "Schweiz" }
];

const select = document.createElement("select");
select.name = "land";

// new Option(text, value, defaultSelected, selected)
select.add(new Option("Bitte wählen …", "", true, true));
for (const { code, name } of laender) {
  select.add(new Option(name, code));
}

document.body.append(select);
console.log(select.length, select.value === "");

4 true

Auswahl per change-Event auswerten

const select = document.querySelector("select[name=land]");

select.addEventListener("change", (event) => {
  const sel = event.currentTarget;
  const option = sel.options[sel.selectedIndex];
  console.log(`Gewählt: ${option.text} (${sel.value})`);
});

// Programmatisch setzen – löst KEIN change-Event aus
select.value = "at";
select.dispatchEvent(new Event("change", { bubbles: true }));

Gewählt: Österreich (at)

Mehrfachauswahl auslesen

const tags = document.createElement("select");
tags.multiple = true;
["js", "css", "html"].forEach((t) => tags.add(new Option(t, t)));

tags.options[0].selected = true;
tags.options[2].selected = true;

const gewaehlt = Array.from(tags.selectedOptions, (o) => o.value);
console.log(gewaehlt, tags.value);

["js", "html"] "js"

Abhängige Liste leeren und Pflichtfeld prüfen

const stadt = document.querySelector("#stadt");
stadt.required = true;

// Alle Optionen entfernen
stadt.length = 0; // alternativ: stadt.replaceChildren()
stadt.add(new Option("– keine –", ""));

if (!stadt.checkValidity()) {
  stadt.reportValidity();
  console.log("Validierung:", stadt.validationMessage !== "");
}

Validierung: true

// Wichtig · Fallstricke

Kein Event beim Setzen per Skript: Wenn du value oder selectedIndex per Code änderst, wird kein change-/input-Event ausgelöst. Bei Bedarf musst du es selbst mit dispatchEvent() auslösen.
value bei Mehrfachauswahl: value liefert nur die erste ausgewählte Option. Alle Werte bekommst du über selectedOptions.
Unbekannter Wert: Setzt du value auf einen Wert, den keine Option hat, wird die Auswahl aufgehoben (selectedIndex === -1). Das ist kein Fehler.
remove() ist mehrdeutig: Mit Index entfernt es eine Option, ohne Argument das ganze Element (Element.prototype.remove).
Live-Sammlungen: options und selectedOptions ändern sich sofort mit. Wenn du beim Iterieren Optionen entfernst, lauf rückwärts oder kopiere die Sammlung vorher mit Array.from().
Sicherheit: Optionen aus Nutzer- oder API-Daten besser mit new Option(text, value) erzeugen statt mit innerHTML. So vermeidest du XSS.
Kompatibilität: Die Kern-API funktioniert in allen Browsern. showPicker() gibt es erst in neueren Versionen (Chrome 121+, Firefox 122+, Safari 18.4+) und braucht eine Nutzeraktion. Auch anpassbare Selects über appearance: base-select sind noch experimentell.

Siehe auch

HTMLObjectElement HTMLSlotElement HTMLDListElement HTMLLegendElement HTMLMeterElement