Nolaižamo sarakstu apstrāde JavaScript

Šajā nodarbībā mēs pētīsim darbu ar atlasīšanas elementu select, kas ir nolaižams saraksts. Ja jūs neprotat strādāt ar šo elementu HTML, tad vispirms apgūstiet tā ierīkojumu atsauces grāmatā šeit: select.

Apskatīsim, kā strādāt ar šo elementu caur JavaScript. Pieņemsim, ka mums ir dots šāds nolaižams saraksts:

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

Iegūstam atsauci uz selektu mainīgajā:

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

Tagad, mainoties selektam, izvadīsim ekrānā atlasītā saraksta punkta tekstu. Lai to izdarītu, ir jānolasa value īpašība mūsu selektam:

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

Dots selekti, rindkopa un poga. Noklikšķinot uz pogas, izvadiet saraksta atlasītā punkta tekstu rindkopā.

Izveidojiet nolaižamo gadu sarakstu no 2020 līdz 2030. Izvēloties kādu saraksta punktu, izvadiet ziņojumu par to, vai šis gads ir garais (garais gads) vai nē.