JavaScript-ում բացվող ցուցակների հետ աշխատելը

Այս դասում մենք կուսումնասիրենք select տեգի հետ աշխատանքը, որն իրենից ներկայացնում է բացվող ցուցակ: Եթե դուք չգիտեք, թե ինչպես աշխատել այս տեգի հետ HTML-ում, ապա նախ ուսումնասիրեք նրա կառուցվածքը այս հղումով տեղադրված տեղեկագրքում. select.

Եկեք տեսնենք, թե ինչպես աշխատել այս տեգի հետ JavaScript-ի միջոցով: Ենթադրենք, մենք ունենք հետևյալ բացվող ցուցակը.

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

Ստացենք select-ի հղումը փոփոխականի մեջ.

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

Եկեք այժմ, երբ select-ը փոխվի, արտածենք էկրանին ցուցակի ընտրված կետի տեքստը. Դրա համար անհրաժեշտ է կարդալ value հատկությունը մեր select-ի վրա.

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

Տրված է select, պարբերություն և կոճակ: Կոճակի վրա կտտացնելիս արտածեք ցուցակի ընտրված կետի տեքստը պարբերությունում:

Ստեղծեք տարիների բացվող ցուցակ 2020 մինչև 2030: Երբ ընտրվում է ցուցակի որևէ կետ, արտածեք հաղորդագրություն այն մասին, նահանջ տարի է այն, թե ոչ: