Arbete med rullgardinsmenyer i JavaScript

I den här lektionen kommer vi att studera arbete med taggen select, som representerar en rullgardinsmeny. Om du inte kan arbeta med denna tagg i HTML, studera först dess uppbyggnad i referensboken via denna länk: select.

Låt oss se hur man arbetar med denna tagg via JavaScript. Låt oss säga att vi har följande rullgardinsmeny:

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

Låt oss få en referens till select-elementet i en variabel:

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

Låt oss nu när select-elementet ändras skriva ut texten för det valda listalternativet. För att göra detta behöver du läsa egenskapen value för vårt select-element:

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

Givet ett select-element, ett stycke och en knapp. Vid klick på knappen, skriv ut texten för det valda listalternativet i stycket.

Skapa en rullgardinsmeny med år från 2020 till 2030. När ett listalternativ väljs, skriv ut ett meddelande om detta år är skottår eller inte.