Darbas su išskleidžiamaisiais sąrašais JavaScript

Šioje pamokoje mes išnagrinėsime darbą su tagu select, kuris yra išskleidžiamasis sąrašas. Jei nemokate dirbti su šiuo tagu HTML, pirmiausia išstudijuokite jo struktūrą žinyno pagal šią nuorodą: select.

Pažiūrėkime, kaip dirbti su šiuo tagu per JavaScript. Tarkime, kad turime tokį išskleidžiamąjį sąrašą:

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

Gaukime nuorodą į select elementą į kintamąjį:

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

Dabar, pasikeitus select reikšmei, išveskime ekrane pasirinkto sąrašo punkto tekstą. Tam reikia nuskaityti value savybę mūsų select elemento:

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