Punimi me listat rënëse në JavaScript

Në këtë mësim do të studiojmë punimin me tagin select, i cili përfaqëson një listë rënëse. Nëse nuk dini si të punoni me këtë tag në HTML, atëherë fillimisht studioni strukturën e tij në manualin përmes kësaj lidhjeje: select.

Le të shohim se si të punohet me këtë tag përmes JavaScript. Le të themi se kemi një listë rënëse si kjo:

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

Le të marrim një referencë për select në një variabël:

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

Tani le të shfaqim në ekran tekstin e opsionit të zgjedhur kur selektori ndryshon. Për këtë duhet të lexojmë vetinë value të selektorit tonë:

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

Jepet një selektor, një paragraf dhe një buton. Me klikim në buton shfaqni tekstin e opsionit të zgjedhur të listës në paragraf.

Krijoni një listë rënëse të viteve nga 2020 deri në 2030. Kur zgjidhni një opsion të listës, shfaqni një mesazh që tregon nëse viti është i brishtë apo jo.