Travailler avec les listes déroulantes en JavaScript

Dans cette leçon, nous étudierons le travail avec la balise select, qui représente une liste déroulante. Si vous ne savez pas comment travailler avec cette balise en HTML, commencez par étudier son fonctionnement dans le manuel à ce lien : select.

Voyons comment travailler avec cette balise via JavaScript. Supposons que nous ayons une liste déroulante comme celle-ci :

html<select id="select">
  <option>one</option>
  <option selected>two</option>
  <option>three</option>
</select>

Obtenons une référence au select dans une variable :

javascriptlet select = document.querySelector('#select');

Maintenant, lors du changement de sélection, affichons le texte de l'élément sélectionné de la liste. Pour cela, il faut lire la propriété value de notre select :

javascriptselect.addEventListener('change', function(){
  console.log(this.value);
});