Receber texto da opção selecionada do select com JavaScript

Neste artigo você vai aprender a como receber texto da opção selecionada do select com JavaScript, ou seja, extrair o texto da option que o usuário selecionou

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

Primeiramente vamos precisar selecionar o select do HTML, com algum método de seleção de elementos, como:

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

• querySelector
• getElementById

Depois podemos acessar a opção selecionada com selectedIndex, uma propriedade do elemento select

Para selecionar o texto podemos acessar a propriedade text da opção selecionada

Vamos ver um exemplo prático para esclarecer a explicação:

<select name="opcoes" id="opcoes">
  <option value="a">Letra A</option>
  <option value="b">Letra B</option>
  <option value="c" selected>Letra C</option>
</select>

Aqui temos nosso HTML base com a terceira opção selecionada

Agora vamos criar um código JS para receber o terceiro da opção 3:

const select = document.querySelector("#opcoes");

const indice = select.selectedIndex;
const valor = select.value;
const texto = select.options[indice].text;   

console.log(indice); // 2
console.log(valor); // c
console.log(texto); // Letra C

Veja que aqui selecionamos o elemento primeiramente

Depois descobrimos o índice da opção selecionada com selectedIndex

Podemos receber o valor do select também, utilizando a propriedade value no próprio elemento

E por fim acessamos options para receber o texto da opção selecionada, resolvendo assim o nosso problema

O texto pode ser acessado por meio da opção text, que nos dá o valor em string

Conclusão

Neste artigo você viu como extrair o texto da opção selecionada do select, utilizando JavaScript

Podemos receber a opção selecionada, o seu índice, com selectedIndex

E ao acessar options, propriedade do select, podemos extrair o texto baseado no índice que obtemos anteriormente

A propriedade text é utilizada para receber o texto do elemento que está selecionado

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