28.03.2025

Recuperando o Texto da Opção Selecionada em um Dropdown com JavaScript

Resposta Rápida

Para determinar qual texto está selecionado em um dropdown <select>, você pode usar as capacidades do JavaScript:

var textoSelecionado = document.querySelector('#meuSelect').selectedOptions[0].text;

Agora, o texto do item ativo no dropdown com o ID meuSelect está armazenado na variável textoSelecionado.

Extração de Texto em Tempo Real na Mudança de Seleção

Vincule um manipulador de eventos ao evento change se você precisar acompanhar as mudanças no dropdown e responder a elas em tempo real:

document.getElementById('meuSelect').addEventListener('change', function() {
  alert(this.options[this.selectedIndex].text);
});

Visualização

Vamos imaginar um cenário onde você é apresentado a várias opções, mas apenas uma delas merece atenção especial:

Opções: [🤵, 🌟, 🧑‍🚀, 🧙‍♂️]

Selecione esta opção específica usando JavaScript:

let artistaSelecionado = document.querySelector('select').selectedOptions[0].text;

Em destaque: [ , 🌟, , ]

Agora, o "reflexo" está sobre o texto do nosso item selecionado.

Extraindo Texto Usando o Atributo Value

O atributo value pode corresponder ao texto da seleção; nesse caso, você pode usar um método simplificado para obter esse texto:

var textoSelecionado = document.querySelector('#meuSelect').value;

Mas lembre-se, essa abordagem é eficaz apenas quando o value e o texto exibido são os mesmos.

Melhorando a Experiência do Usuário com Rótulos Claros

Para melhorar a clareza da sua interface do usuário, especialmente em formulários, use uma combinação de elementos label e select:

<label for="meuSelect">Sua escolha:</label>
<select id="meuSelect">
  <!-- suas opções aqui -->
</select>

Rótulos claros ajudam os usuários a navegar mais rapidamente e facilitam o trabalho dos desenvolvedores ao referenciar elementos.

Função Universal para Trabalhar com Múltiplos Dropdowns

Quando há múltiplos dropdowns em uma página, a seguinte função pode ser útil:

function obterTextoSelecionado(idElemento) {
  let dropdown = document.getElementById(idElemento);
  return dropdown.options[dropdown.selectedIndex].text;
}

var textoEscolhido1 = obterTextoSelecionado('dropdown1');
var textoEscolhido2 = obterTextoSelecionado('dropdown2');

Recursos Úteis

1. <select>: Elemento de Seleção HTML - MDN — Informações detalhadas sobre o elemento <select>.
2. Método querySelector() - Documento DOM HTML — Noções básicas sobre seleção de elementos no documento.
3. Como Obter o Valor Selecionado em um Dropdown Usando JavaScript - Stack Overflow — Discussões e conselhos de programadores.
4. Propriedades e Métodos de Formulário — Análise detalhada sobre o manuseio de formulários e seus elementos em JavaScript.
5. Estilização Padrão para Dropdowns | CSS-Tricks — Nuances da estilização de elementos <select>.
6. .val() | Documentação da API jQuery — Guia sobre como usar o método .val() em jQuery para elementos de formulário.

Video

Navigation