Arbejde med dropdown-lister i JavaScript

I denne lektion vil vi studere arbejdet med tagget select, som repræsenterer en dropdown-liste. Hvis du ikke kan arbejde med dette tag i HTML, så studer først dens opbygning i referencebogen via dette link: select.

Lad os se på, hvordan man arbejder med dette tag via JavaScript. Lad os sige, at vi har fået en sådan dropdown-liste:

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

Lad os få en reference til select i en variabel:

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

Lad os nu udskrive teksten fra den valgte listepunkt på skærmen, når select ændres. For at gøre dette skal du læse egenskaben value for vores select:

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

Givet en select, en afsnit og en knap. Ved klik på knappen skal teksten fra den valgte listepunkt udskrives i afsnittet.

Lav en dropdown-liste med år fra 2020 til 2030. Når der vælges et listepunkt, skal der vises en besked om, hvorvidt det er et skudår eller ej.