Lavorare con menu a tendina in JavaScript

In questa lezione studieremo il lavoro con il tag select, che rappresenta un menu a tendina. Se non sai come lavorare con questo tag in HTML, per iniziare studia il suo funzionamento nella guida a questo link: select.

Diamo un'occhiata a come lavorare con questo tag tramite JavaScript. Supponiamo di avere un menu a tendina come questo:

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

Otteniamo un riferimento al select in una variabile:

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

Ora, quando il select viene modificato, visualizziamo a schermo il testo dell'elemento selezionato. Per fare questo bisogna leggere la proprietà value del nostro select:

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

Dato un select, un paragrafo e un pulsante. Al click sul pulsante visualizza il testo dell'elemento selezionato nel paragrafo.

Crea un menu a tendina per gli anni da 2020 a 2030. Quando si seleziona un elemento del menu, visualizza un messaggio che indica se l'anno è bisestile o meno.