HTMLSelectElement : propriété selectedIndex

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété selectedIndex de l'interface HTMLSelectElement correspond à l'indice numérique du premier élément HTML <option> sélectionné dans un élément HTML <select>, s'il y en a un, ou à -1 si aucune <option> n'est sélectionnée. Définir cette propriété sélectionne l'option à cet indice et désélectionne toutes les autres options, tandis que la définir à -1 désélectionne toutes les options actuellement sélectionnées.

html
<p id="p">selectedIndex&nbsp;: 0</p>

<select id="select">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>

JavaScript

js
const selectElem = document.getElementById("select");
const pElem = document.getElementById("p");

// Quand une nouvelle <option> est selectionnée
selectElem.addEventListener("change", () => {
  const index = selectElem.selectedIndex;
  // Rapporter cette donnée au <p>
  pElem.innerHTML = `selectedIndex&nbsp;: ${index}`;
});