Praca z listami rozwijanymi w JavaScript

W tej lekcji poznamy pracę z tagiem select, który reprezentuje listę rozwijaną. Jeśli nie umiesz pracować z tym tagiem w HTML, to najpierw zapoznaj się z jego budową w podręczniku pod tym linkiem: select.

Przyjrzyjmy się, jak pracować z tym tagiem przez JavaScript. Załóżmy, że mamy taką listę rozwijaną:

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

Pobierzmy referencję do selecta do zmiennej:

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

Teraz po zmianie selecta wypiszmy na ekran tekst wybranego punktu listy. Aby to zrobić, trzeba odczytać właściwość value naszego selecta:

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