Werk met aftreklyste in JavaScript

In hierdie les sal ons die werk met die select-tag bestudeer, wat 'n aftreklys voorstel. As jy nie weet hoe om met hierdie tag in HTML te werk nie, bestudeer eers die struktuur daarvan in die handleiding by hierdie skakel: select.

Kom ons kyk hoe om met hierdie tag te werk deur JavaScript. Laat ons sê ons het die volgende aftreklys:

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

Laat ons 'n verwysing na die select kry in 'n veranderlike:

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

Kom ons nou, wanneer die select verander, die teks van die gekose lysitem na die skerm uitskryf. Om dit te doen, moet ons die value eienskap van ons select lees:

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

Gegee 'n select, 'n paragraaf en 'n knoppie. Met 'n klik op die knoppie, skryf die teks van die gekose lysitem in die paragraaf uit.

Maak 'n aftreklys van jare van 2020 tot 2030. Wanneer 'n item uit die lys gekies word, gee 'n boodskap oor of dit 'n skrikkeljaar is of nie.