Legördülő listák kezelése JavaScriptben

Ebben a leckében megismerkedünk a select taggel, amely egy legördülő listát jelent. Ha nem tudod, hogyan kell ezt a taget használni HTML-ben, akkor először tanulmányozd a szerkezetét a referenciában ezen a linken: select.

Nézzük meg, hogyan kell ezzel a taggel dolgozni JavaScripten keresztül. Tegyük fel, hogy van egy ilyen legördülő listánk:

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

Kapjunk hivatkozást a select-re egy változóba:

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

Most pedig a lista megváltozásakor írjuk ki a kiválasztott elem szövegét. Ehhez olvassuk ki a value tulajdonságot a selectünkön:

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

Adott egy select, egy bekezdés és egy gomb. A gombra kattintva írja ki a lista kiválasztott elemének szövegét a bekezdésbe.

Készítsen egy legördülő listát az évekről 2020-tól 2030-ig. Amikor kiválaszt egy elemet a listából, jelenítsen meg egy üzenetet arról, hogy szökőév-e az az év vagy sem.