Como obter o valor selecionado de uma lista suspensa em JavaScript: análise completa

Chega de adivinhar: como obter o valor selecionado de um dropdown em JavaScript?

Você já se deparou com uma situação em que o usuário seleciona algo em uma lista suspensa no site, mas seu programa não consegue "ver" isso? Familiar, não é? Esta é uma das perguntas mais frequentes no Stack Overflow (e não é à toa!), feita por milhares de desenvolvedores iniciantes e até experientes. Parece simples, não? Mas existem nuances, e hoje vamos analisá-las de uma vez por todas.

Neste artigo, mostrarei não apenas uma, mas várias maneiras de obter o valor selecionado de um dropdown em JavaScript puro. Você aprenderá a diferença entre value e selectedIndex, como lidar com o evento de seleção e como não cair na armadilha do multiselect. Vamos lá!

A maneira mais simples: a propriedade value

Imagine que você tem um select HTML comum:

<select id="city">\n  <option value="moscow">Moscou</option>\n  <option value="spb">São Petersburgo</option>\n  <option value="kazan">Cazã</option>\n</select>

Para obter o valor selecionado, precisamos fazer apenas duas coisas:

\n
1. Encontrar o elemento <select> no DOM.
\n
2. Ler sua propriedade value.
\n

Veja como fica no código:

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // Exibirá, por exemplo, "spb"

Importante! A propriedade value do elemento <select> retorna automaticamente o atributo value da <option> atualmente selecionada. Esta é a maneira mais simples e recomendada, se você precisa exatamente do valor, e não do texto.

E se precisar obter o texto do item selecionado?

Às vezes, precisamos não do valor, mas do que o usuário vê (por exemplo, "Moscou" em vez de "moscow"). Para isso, existe a propriedade textContent (ou innerText) da opção selecionada. Mas primeiro, precisamos obter a própria opção:

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // Exibirá "Moscou"

Aqui usamos selectedIndex — o índice do elemento selecionado (começando em 0). Depois, acessamos a coleção options e pegamos o elemento desejado.

Como reagir à mudança de seleção em tempo real?

Obter o valor uma vez é bom, mas na maioria das vezes precisamos fazer algo quando o usuário altera a seleção. Para isso, usamos o evento change:

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('Valor selecionado:', selectedValue);\n  console.log('Texto selecionado:', selectedText);\n});

Agora, toda vez que o usuário mudar a cidade na lista suspensa, recebemos instantaneamente os dados atualizados. Prático, não é?

Caso especial: multiselects (select com múltipla escolha)

E se você tiver uma lista suspensa com seleção múltipla? Por exemplo:

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

Neste caso, selectElement.value retornará apenas o primeiro valor selecionado, e não todos. Para obter todos os itens selecionados, é necessário percorrer a coleção options:

const selectElement = document.getEl