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:

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

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

javascriptlet 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:

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