JavaScript

Pegar o valor selecionado no select com JavaScript

16 de abril de 2021

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

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x