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

Pegar o valor selecionado no select capa

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

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