HTMLOptionElement.index — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptionElement.index

Beschreibung

Die schreibgeschützte Eigenschaft index liefert die Position eines <option>-Elements innerhalb der Liste der Optionen des zugehörigen <select>-Elements. Die Zählung beginnt bei 0 und entspricht genau dem Index, unter dem die Option in select.options zu finden ist.

Gezählt wird in Dokumentreihenfolge über alle Optionen des Auswahlfelds, auch über Gruppengrenzen von <optgroup> hinweg. Die Zählung beginnt also nicht in jeder Gruppe neu. Auch deaktivierte oder versteckte Optionen werden mitgezählt.

Die Eigenschaft ist nützlich, wenn Sie ausgehend von einem konkreten Optionselement (z. B. aus einem Event, querySelector() oder selectedOptions) dessen Position ermitteln wollen, etwa um Nachbaroptionen anzusprechen, die Reihenfolge zu ändern oder Daten aus einem parallelen Array zuzuordnen.

Gehört eine Option zu keinem <select> (weil sie z. B. frisch mit new Option() erzeugt, aus dem DOM entfernt wurde oder in einem <datalist> steht), gibt index immer 0 zurück.

Rückgabewert

Typ

number

Beschreibung

Ganzzahl ≥ 0: die Position der Option in select.options. Gehört die Option zu keinem <select>, ist der Wert 0.

Beispiele

Index der ausgewählten Option beim change-Event

// HTML: <select id="farbe"><option>Rot</option><option>Grün</option><option>Blau</option></select>
const select = document.querySelector('#farbe');

select.addEventListener('change', () => {
  const [option] = select.selectedOptions;
  console.log(`${option.text} steht an Position ${option.index}`);
});

// Benutzer wählt „Blau“

Blau steht an Position 2

Zählung über optgroup-Grenzen hinweg

// HTML:
// <select id="stadt">
//   <optgroup label="Deutschland">
//     <option>Berlin</option><option>Hamburg</option>
//   </optgroup>
//   <optgroup label="Österreich">
//     <option>Wien</option><option>Graz</option>
//   </optgroup>
// </select>
const wien = [...document.querySelectorAll('#stadt option')]
  .find((opt) => opt.text === 'Wien');

console.log(wien.index); // nicht 0, sondern Position in der Gesamtliste
console.log(wien.parentElement.label);

2 Österreich

Option um eine Position nach oben verschieben

const moveUp = (option) => {
  const select = option.closest('select');
  if (!select || option.index === 0) return;
  const vorgaenger = select.options[option.index - 1];
  select.insertBefore(option, vorgaenger);
};

const select = document.querySelector('#farbe');
const gruen = select.options[1];
moveUp(gruen);
console.log(gruen.index, [...select.options].map((o) => o.text));

0 ["Grün", "Rot", "Blau"]

Freistehende Option liefert immer 0

const opt = new Option('Neu', 'neu');
console.log(opt.index); // noch in keinem select

const select = document.querySelector('#farbe');
select.add(opt); // ans Ende anhängen
console.log(opt.index);

opt.remove();
console.log(opt.index);

0 3 0

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie option.index = 3 wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode einen TypeError aus. Zum Umsortieren verwenden Sie select.add(option, before) oder insertBefore().
Mehrdeutige 0: Der Wert 0 kann „erste Option“ oder „gehört zu keinem select“ bedeuten. Prüfen Sie im Zweifel zusätzlich option.closest('select') bzw. option.form.
Optionen in einem <datalist> liefern immer 0, da ein Datalist keine „Liste der Optionen“ im Sinne der Spezifikation besitzt.
Nicht verwechseln mit HTMLSelectElement.selectedIndex: Diese Eigenschaft steht am <select>, ist beschreibbar und liefert -1, wenn nichts ausgewählt ist.
Der Wert wird bei jedem Zugriff aktuell berechnet und ändert sich, sobald Optionen eingefügt, entfernt oder verschoben werden. Speichern Sie ihn also nicht dauerhaft zwischen.
Kompatibilität: Die Eigenschaft wird seit jeher von allen Browsern unterstützt.

Siehe auch

HTMLOptionElement.label HTMLOptionElement.text HTMLOptionElement.form HTMLOptionElement.value HTMLOptionElement.disabled