HTMLSelectElement : propriété selectedIndex

Baseline Widely available

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.

<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

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}`;
});