1

Quero pegar o valor selecionado do select e retornar na tela usando js.

HTML:

    <select name="lista" id="lista-conteudos">
        <option value="ADIÇÃO">Na adição uma quantidade é somada de outra.</option>
        <option value="SUBTRAÇÃO">Na subtração uma quantidade é retirada de outra.</option>
        <option value="MULTIPLICAÇÃO">Forma simples de se adicionar uma quantidade finita de números iguais.</option>
        <option value="DIVISÃO">Divisão é o inverso da multiplicação.</option>
        <option value="FRAÇÃO">Determinada quantidade que foi dividida em pedaços ou fragmentos iguais.</option>
        <option value="1º GRAU">O grau da incógnita é 1, isto é, o expoente da incógnita é igual a 1.</option>
        <option value="2º GRAU">Representada por ax²+bx+c=0. Os coeficientes são números reais, com a ≠ 0.</option>
        <option value="POTÊNCIAÇÃO">Usamos quando um número é multiplicado por ele mesmo várias vezes.</option>
        <option value="RADICIAÇÃO">Inversa à potenciação, assim como a divisão é o inverso da multiplicação.</option>
        <option value="RAZÃO">Relação existente entre dois valores de uma mesma grandeza.</option>
        <option value="PROPORÇÕES">Trata-se da igualdade entre razões das medidas extraídas de grandezas.</option>
        <option value="ALGARISMOS">Representar números em sistemas de numeração posicionais.</option>
        <option value="GRANDEZAS">Propriedades mensuráveis de um fenômeno, corpo ou substância.</option>
        <option value="REG. DE 3">Descobrir quantidade relativa a dois ou mais valores.</option>
        <option value="PORCENTAGEM">Medida de razão com base 100.</option>
        <option value="GEOMETRIA">Plana ou euclidiana, estuda as figuras que não possuem volume.</option>
        <option value="MEDIDAS">Medida específica de determinada grandeza física.</option>
    </select>

JS: Estou fazendo assim, porém só retorna o primeiro option e os outros ao selecionar não retornam no console.log

<script>
        /* LER STRING DIGITADA */
        var select = document.getElementById('lista-conteudos');
        var value = select.options[select.selectedIndex].value;
        console.log(value);
    </script>
2
  • Já deu uma procurada? Aqui no site mesmo, existem muitas perguntas com exemplos de JavaScript pegando o valor de uma opção selecionada, esta por exemplo é bem o que precisa: pt.stackoverflow.com/a/102665/75267
    – LeAndrade
    21/12/2020 às 23:57
  • Procurei, porém está retornando apenas 1 valor (o Adição) e ao clicar em outros não retorna no console log, preciso que retorne qualquer 1 que eu clicar.
    – Braz Brz
    22/12/2020 às 0:05

1 Resposta 1

2

Quando você seleciona um option em um select o value do option selecionado será o value da tag select, então você pode fazer um addEventListener change, para detectar mudanças no select e então pegar o seu value, que como já dito antes o value do option selecionado "basicamente se torna" o value do select

var select = document.getElementById('lista-conteudos')

select.addEventListener('change', function(){
    console.log(select.value)
})
   <select name="lista" id="lista-conteudos">
        <option value="ADIÇÃO">Na adição uma quantidade é somada de outra.</option>
        <option value="SUBTRAÇÃO">Na subtração uma quantidade é retirada de outra.</option>
        <option value="MULTIPLICAÇÃO">Forma simples de se adicionar uma quantidade finita de números iguais.</option>
        <option value="DIVISÃO">Divisão é o inverso da multiplicação.</option>
        <option value="FRAÇÃO">Determinada quantidade que foi dividida em pedaços ou fragmentos iguais.</option>
        <option value="1º GRAU">O grau da incógnita é 1, isto é, o expoente da incógnita é igual a 1.</option>
        <option value="2º GRAU">Representada por ax²+bx+c=0. Os coeficientes são números reais, com a ≠ 0.</option>
        <option value="POTÊNCIAÇÃO">Usamos quando um número é multiplicado por ele mesmo várias vezes.</option>
        <option value="RADICIAÇÃO">Inversa à potenciação, assim como a divisão é o inverso da multiplicação.</option>
        <option value="RAZÃO">Relação existente entre dois valores de uma mesma grandeza.</option>
        <option value="PROPORÇÕES">Trata-se da igualdade entre razões das medidas extraídas de grandezas.</option>
        <option value="ALGARISMOS">Representar números em sistemas de numeração posicionais.</option>
        <option value="GRANDEZAS">Propriedades mensuráveis de um fenômeno, corpo ou substância.</option>
        <option value="REG. DE 3">Descobrir quantidade relativa a dois ou mais valores.</option>
        <option value="PORCENTAGEM">Medida de razão com base 100.</option>
        <option value="GEOMETRIA">Plana ou euclidiana, estuda as figuras que não possuem volume.</option>
        <option value="MEDIDAS">Medida específica de determinada grandeza física.</option>
    </select>

1
  • 1
    Muito Obrigado !!!
    – Braz Brz
    22/12/2020 às 12:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .