Lucrul cu liste drop-down în JavaScript

În această lecție vom studia lucrul cu tag-ul select, care reprezintă o listă drop-down. Dacă nu știți să lucrați cu acest tag în HTML, atunci mai întâi studiați funcționarea lui în manual la acest link: select.

Să vedem cum să lucrăm cu acest tag prin JavaScript. Să presupunem că avem o listă drop-down ca cea de mai jos:

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

Obținem o referință la select într-o variabilă:

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

Acum, la schimbarea selecției, să afișăm textul opțiunii selectate. Pentru aceasta, trebuie să citim proprietatea value a select-ului nostru:

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

Este dat un select, un paragraf și un buton. La click pe buton afișați textul opțiunii selectate în paragraf.

Creați o listă drop-down cu ani de la 2020 până la 2030. La selectarea oricărei opțiuni din listă, afișați un mesaj dacă acel an este bisect sau nu.