Arbeid med nedtrekkslister i JavaScript

I denne leksjonen vil vi studere arbeidet med taggen select, som representerer en nedtrekksliste. Hvis du ikke kan arbeide med denne taggen i HTML, så studer først dens oppbygning i referansen ved denne lenken: select.

La oss se på hvordan vi kan arbeide med denne taggen via JavaScript. La oss si at vi har en slik nedtrekksliste:

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

La oss få en referanse til select i en variabel:

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

La oss nå, ved endring av select, vise teksten til det valgte listepunktet på skjermen. For å gjøre dette må du lese egenskapen value til vår select:

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

Gitt en select, et avsnitt og en knapp. Ved klikk på knappen skal teksten til det valgte listepunktet vises i avsnittet.

Lag en nedtrekksliste med år fra 2020 til 2030. Ved valg av et listepunkt, vis en melding om hvorvidt det er et skuddår eller ikke.