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:

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

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

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

Gegeven een select, een paragraaf en een knop. Bij klik op de knop toon de tekst van het geselecteerde lijstitem in de paragraaf.

Maak een dropdown-lijst met jaren van 2020 tot 2030. Bij het selecteren van een lijstitem toon een bericht of dit jaar een schrikkeljaar is of niet.