HTMLOptionsCollection.selectedIndex — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptionsCollection.selectedIndex

Beschreibung

Die Eigenschaft selectedIndex der Schnittstelle HTMLOptionsCollection gibt den nullbasierten Index des ersten ausgewählten <option>-Elements zurück. Ist keine Option ausgewählt, ist der Wert -1. Die Sammlung erreicht man über select.options. Der Wert entspricht dem von HTMLSelectElement.selectedIndex.

Die Eigenschaft ist schreibbar: Setzt man eine Zahl, wird die Option mit diesem Index ausgewählt und alle anderen Optionen werden abgewählt, auch bei <select multiple>. Setzt man -1 oder einen Index außerhalb des gültigen Bereichs, werden alle Optionen abgewählt.

Typische Einsatzfälle sind das Auslesen der aktuellen Auswahl in einem Formular, das Zurücksetzen eines Auswahlfelds auf einen Platzhalter und das programmgesteuerte Vorauswählen eines Eintrags, etwa nach dem Laden gespeicherter Einstellungen.

Rückgabewert

Typ

number

Beschreibung

Nullbasierter Index der ersten ausgewählten Option oder -1, wenn keine ausgewählt ist.

Beispiele

Aktuelle Auswahl auslesen

// HTML: <select id="land"><option>Deutschland</option><option selected>Österreich</option><option>Schweiz</option></select>
const options = document.getElementById('land').options;
const index = options.selectedIndex;
console.log(index, options[index].text);

1 Österreich

Auswahl programmgesteuert setzen und zurücksetzen

const select = document.getElementById('land');

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

// Alle Optionen abwählen
select.options.selectedIndex = -1;
console.log(select.options.selectedIndex, JSON.stringify(select.value));

Schweiz -1 ""

Auf Änderungen reagieren und Platzhalter prüfen

// HTML: <select id="groesse"><option value="">Bitte wählen …</option><option value="s">S</option><option value="m">M</option></select>
const select = document.getElementById('groesse');

select.addEventListener('change', () => {
  const { selectedIndex } = select.options;
  if (selectedIndex <= 0) {
    console.warn('Bitte eine Größe auswählen.');
    return;
  }
  console.log(`Gewählt: ${select.options[selectedIndex].value}`);
});

Gewählt: m (nach Auswahl von „M“)

Gespeicherte Auswahl wiederherstellen

const select = document.getElementById('groesse');
const gespeichert = localStorage.getItem('groesse') ?? 'm';

const index = [...select.options].findIndex((opt) => opt.value === gespeichert);
select.options.selectedIndex = index; // -1, falls nicht gefunden: nichts ausgewählt

select.addEventListener('change', () => localStorage.setItem('groesse', select.value));

// Wichtig · Fallstricke

Bei <select multiple> wird nur der Index der ersten ausgewählten Option geliefert. Alle ausgewählten Optionen erhält man über select.selectedOptions.
Beim Schreiben werden bei Mehrfachauswahl alle anderen Optionen abgewählt. Wer nur eine Option zusätzlich auswählen will, setzt option.selected = true.
Bei einem einfachen <select> ohne size-Attribut wählt der Browser in der Regel automatisch die erste Option aus. Der Wert ist dann 0 und nicht -1.
Wird selectedIndex per Skript geändert, lösen Browser kein change- oder input-Ereignis aus. Bei Bedarf muss man es selbst senden, z. B. mit select.dispatchEvent(new Event('change', { bubbles: true })).
Werte außerhalb des gültigen Bereichs lösen keinen Fehler aus. Sie wählen einfach alle Optionen ab.
Die Eigenschaft an HTMLOptionsCollection wurde später eingeführt als HTMLSelectElement.selectedIndex. Sie wird inzwischen von allen modernen Browsern unterstützt. Für ältere Umgebungen ist select.selectedIndex die sicherere Wahl.

Siehe auch

HTMLOptionsCollection.length HTMLOptionElement.selected HTMLSelectElement.selectedIndex HTMLOptionElement.index ImageTrackList.selectedIndex