Werken met dropdown-lijsten in JavaScript

In deze les bestuderen we het werken met de tag select, die een dropdown-lijst vertegenwoordigt. Als je niet weet hoe je moet werken met deze tag in HTML, bestudeer dan eerst zijn structuur in de handleiding via deze link: select.

Laten we eens kijken hoe we met deze tag kunnen werken via JavaScript. Stel dat we de volgende dropdown-lijst hebben:

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

Laten we een referentie naar de select in een variabele zetten:

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

Laten we nu bij het wijzigen van de select de tekst van het geselecteerde lijstitem op het scherm tonen. Hiervoor moeten we de eigenschap value lezen van onze select:

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