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
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
Mano, você salvou minha vida! Obrigado!
de nada mano! =D
Obrigado!!