HTMLSelectElement.selectedIndex — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.selectedIndex

Beschreibung

Die Eigenschaft selectedIndex eines HTMLSelectElement gibt die Position des ersten ausgewählten <option>-Elements innerhalb der Auswahlliste an. Die Zählung beginnt bei 0 und entspricht der Reihenfolge in der Sammlung select.options. Optionen in <optgroup>-Elementen zählen dabei fortlaufend mit.

Die Eigenschaft ist lesbar und schreibbar. Setzt man einen Index, wird die entsprechende Option ausgewählt und alle anderen werden abgewählt, auch bei <select multiple>. Weist man -1 zu, wird die Auswahl komplett aufgehoben. Ein Index außerhalb des gültigen Bereichs hebt die Auswahl ebenfalls auf und löst keinen Fehler aus.

Typische Einsätze sind das Auslesen der Nutzerwahl in einem change-Handler, das Zurücksetzen eines Formularfelds auf einen Platzhalter und das Prüfen, ob überhaupt etwas ausgewählt wurde. Wer nur den Wert der Auswahl braucht, nimmt meist select.value. Mit selectedIndex kommt man an die Option selbst heran, etwa an ihren angezeigten Text über select.options[select.selectedIndex].text.

Parameter

Name	Typ	Default	Beschreibung
$index	number		Nur beim Setzen: nullbasierter Index der Option, die ausgewählt werden soll. Mit `-1` oder einem ungültigen Index wird die Auswahl aufgehoben.

Rückgabewert

Typ

number

Beschreibung

Index des ersten ausgewählten <option>-Elements oder -1, wenn keine Option ausgewählt ist.

Beispiele

Auswahl im change-Handler auslesen

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

select.addEventListener('change', () => {
  const index = select.selectedIndex;
  if (index === -1) return;
  const option = select.options[index];
  console.log(`Index: ${index}, Wert: ${option.value}, Text: ${option.text}`);
});

Index: 1, Wert: at, Text: Österreich (nach Auswahl von „Österreich“)

Programmatisch auswählen und zurücksetzen

const select = document.querySelector('#land');

// dritte Option (Schweiz) auswählen
select.selectedIndex = 2;
console.log(select.value);

// Auswahl komplett aufheben
select.selectedIndex = -1;
console.log(select.selectedIndex, JSON.stringify(select.value));

ch -1 ""

Pflichtauswahl mit Platzhalter validieren

// HTML: <form id="f"><select id="groesse"><option disabled selected>Bitte wählen…</option><option>S</option><option>M</option><option>L</option></select><button>Senden</button></form>
const form = document.querySelector('#f');
const groesse = document.querySelector('#groesse');

form.addEventListener('submit', (event) => {
  // Index 0 ist der Platzhalter
  if (groesse.selectedIndex <= 0) {
    event.preventDefault();
    console.warn('Bitte eine Größe auswählen.');
    return;
  }
  console.log('Gewählt:', groesse.options[groesse.selectedIndex].text);
});

// Nach dem Absenden wieder auf den Platzhalter setzen
const zuruecksetzen = () => { groesse.selectedIndex = 0; };

Bitte eine Größe auswählen. (wenn der Platzhalter noch ausgewählt ist)

// Wichtig · Fallstricke

Kein change-Ereignis: Wird selectedIndex per Skript gesetzt, feuern weder change noch input. Wenn andere Teile der Seite reagieren sollen, muss man das Ereignis selbst auslösen: select.dispatchEvent(new Event('change', { bubbles: true })).
Mehrfachauswahl: Bei <select multiple> liefert die Eigenschaft nur den Index der ersten ausgewählten Option. Alle ausgewählten Optionen bekommt man über select.selectedOptions. Ein Schreibzugriff hebt alle anderen Auswahlen auf.
Einfaches Dropdown: Ein <select> ohne multiple und ohne size > 1 wählt beim Laden automatisch die erste Option aus, die nicht deaktiviert ist. Der Wert ist dann 0 und nicht -1. Den Wert -1 gibt es dort nur nach einer ausdrücklichen Zuweisung oder wenn die Liste keine Optionen hat.
Vor dem Zugriff prüfen: select.options[select.selectedIndex] ergibt undefined, wenn der Index -1 ist. Deshalb vor dem Zugriff auf .text oder .value prüfen oder optionale Verkettung (?.) nutzen.
Reihenfolge ändert sich: Werden Optionen hinzugefügt oder entfernt, kann sich der Index der ausgewählten Option verschieben. Wer die Auswahl dauerhaft festhalten will, speichert besser value als den Index.
Kompatibilität: Wird seit jeher von allen Browsern unterstützt (DOM Level 1).

Siehe auch

HTMLOptionsCollection.selectedIndex HTMLSelectElement.selectedOptions HTMLSelectElement.multiple HTMLSelectElement.length HTMLSelectElement.required