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:

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

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

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

Dado um select, um parágrafo e um botão. Ao clicar no botão, exiba o texto do item selecionado da lista no parágrafo.

Crie uma lista suspensa de anos de 2020 a 2030. Ao selecionar um item da lista, exiba uma mensagem indicando se o ano é bissexto ou não.