Pegar o valor selecionado no select com JavaScript

Neste artigo você vai aprender a como pegar o valor selecionado no select com JavaScript, ou seja, o valor da option que está selecionada

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também manipulação de DOM, da tag select e option!

Para receber o valor da option ou o texto dela, podemos utilizar a propriedade options do elemento select

Que nos dará todas as opções do mesmo, porém antes precisamos primeiramente selecionar o elemento

E além disso temos uma propriedade selectedIndex, que nos dá a opção selecionada do select

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Por fim é só acessar a propriedade text ou value do elemento

Vamos ao exemplo prático:

<select name="marcas" id="marcas">
  <option value="ford">Ford</option>
  <option value="VW">VW</option>
  <option value="ferrari" selected>Ferrari</option>
</select>

Agora temos um HTML válido para utilizar como exemplo

Veja que a opção Ferrari está com o atributo selected, o que torna esta opção selecionada

Agora veja o JavaScript necessário:

var select = document.getElementById("marcas");

var opcaoTexto = select.options[select.selectedIndex].text;
var opcaoValor = select.options[select.selectedIndex].value;

console.log(opcaoTexto); // Ferrari
console.log(opcaoValor); // ferrari

Aqui selecionamos o select primeiramente, e conseguimos verificar a opção que está selecionada com selectedIndex

Posteriormente verificamos o texto da opção com a propriedade text e também o valor da opção com a propriedade value

Veja que eu coloquei os valores que foram impressos de cada um após a instrução

Conclusão

Neste artigo você aprendeu a pegar o valor selecionado no select com JavaScript

Selecionamos o elemento e posteriormente achamos a opção selecionada com selectedIndex

Para receber os valores e textos utlilizamos value e text, respectivamente

E desta maneira conseguimos resgatar o valor ou texto da opção que está selecionada em algum dos selects da nossa página

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Se liga que dá pra encurtar muito esse código

O próprio elemento select tem uma propriedade value, que já devolve direto o value da option selecionada

var select = document.getElementById("marcas"); console.log(select.value); // ferrari

Ou seja, pra pegar só o valor tu nem precisa passar por options e selectedIndex

Agora, se o que tu quer é o TEXTO que aparece pro usuário (e não o value do atributo), aí sim vale o caminho com selectedIndex e text que vimos acima

Na prática, quase sempre tu quer o valor no momento em que a pessoa muda o select

Pra isso usamos o evento change

var select = document.getElementById("marcas");

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

Agora, toda vez que o usuário escolher outra option, o valor atualizado cai no console

Bem mais útil do que ler o valor só uma vez, né?

Qual a diferença entre value e text no select?

O value é o valor interno da option, aquele que fica no atributo value do HTML e normalmente vai pro backend

Já o text é o que aparece escrito pro usuário na tela

No nosso exemplo a option da Ferrari tem value="ferrari" (minúsculo) e o texto Ferrari

Por isso value devolve ferrari e text devolve Ferrari

Sacar essa diferença evita aquele bug chato de mandar o texto errado pro servidor