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 :

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

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

let 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 :

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

Étant donné un select, un paragraphe et un bouton. Au clic sur le bouton, affichez le texte de l'élément sélectionné de la liste dans le paragraphe.

Créez une liste déroulante d'années de 2020 à 2030. Lors de la sélection d'un élément de la liste, affichez un message indiquant si c'est une année bissextile ou non.