Коркарди рӯйхатҳои нишебӣ дар 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 созед. Ҳангоми интихоби ягон нуқтаи рӯйхат, паёмеро чоп кунед, ки ин сол кабиса аст ё не.