Trabalhando com listas suspensas em JavaScript

Nesta lição, estudaremos o trabalho com a tag select, que representa uma lista suspensa. Se você não sabe trabalhar com esta tag em HTML, primeiro estude sua estrutura no manual através deste link: select.

Vamos ver como trabalhar com esta tag através do JavaScript. Suponha que temos uma lista suspensa como esta:

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

Vamos obter uma referência ao select em uma variável:

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

Agora, ao alterar o select, vamos exibir o texto do item selecionado da lista. Para isso, é necessário ler a propriedade value do nosso select:

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