Comment obtenir la valeur sélectionnée d'une liste déroulante en JavaScript : analyse complète

Assez de deviner : comment récupérer la valeur sélectionnée d'un dropdown en JavaScript ?

Avez-vous déjà été confronté à une situation où un utilisateur sélectionne quelque chose dans une liste déroulante sur un site, mais votre programme ne peut pas le "voir" ? Ça vous parle, n'est-ce pas ? C'est l'une des questions les plus fréquentes sur Stack Overflow (et à juste titre !), posée par des milliers de développeurs débutants et même expérimentés. Cela semble simple, non ? Mais il y a des nuances, et aujourd'hui nous allons les aborder une fois pour toutes.

Dans cet article, je vais vous montrer non pas une, mais plusieurs façons d'obtenir la valeur sélectionnée d'un dropdown en JavaScript pur. Vous découvrirez en quoi value diffère de selectedIndex, comment gérer l'événement de sélection et comment éviter le piège du multi-sélect. C'est parti !

La méthode la plus simple : la propriété value

Imaginez que vous ayez un select HTML classique :

<select id="city">\n  <option value="moscow">Moscou</option>\n  <option value="spb">Saint-Pétersbourg</option>\n  <option value="kazan">Kazan</option>\n</select>

Pour obtenir la valeur sélectionnée, nous devons faire seulement deux choses :

\n
1. Trouver l'élément <select> dans le DOM.
\n
2. Lire sa propriété value.
\n

Voici à quoi cela ressemble en code :

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // Affichera, par exemple, "spb"

Important ! La propriété value de l'élément <select> renvoie automatiquement l'attribut value de l'<option> actuellement sélectionnée. C'est la méthode la plus simple et recommandée si vous avez besoin de la valeur, et non du texte.

Et si on veut obtenir le texte de l'élément sélectionné ?

Parfois, nous avons besoin non pas de la valeur, mais de ce que l'utilisateur voit (par exemple, "Moscou" au lieu de "moscow"). Pour cela, il existe la propriété textContent (ou innerText) de l'option sélectionnée. Mais d'abord, il faut obtenir l'option elle-même :

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // Affichera "Moscou"

Ici, nous utilisons selectedIndex — l'index de l'élément sélectionné (en commençant par 0). Ensuite, nous accédons à la collection options et prenons l'élément souhaité.

Comment réagir aux changements de sélection en temps réel ?

Obtenir la valeur une seule fois, c'est bien, mais le plus souvent, il faut faire quelque chose lorsque l'utilisateur modifie sa sélection. Pour cela, utilisons l'événement change :

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('Valeur sélectionnée :', selectedValue);\n  console.log('Texte sélectionné :', selectedText);\n});

Maintenant, chaque fois que l'utilisateur change de ville dans la liste déroulante, nous obtenons instantanément les données mises à jour. Pratique, n'est-ce pas ?

Cas particulier : les multi-sélects (multiple select)

Et si vous avez une liste déroulante avec sélection multiple ? Par exemple :

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

Dans ce cas, selectElement.value ne renverra que la première valeur sélectionnée, et non toutes. Pour obtenir tous les éléments sélectionnés, il faut parcourir la collection options :

const selectElement = document.getEl