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:

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

Otteniamo un riferimento al select in una variabile:

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

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