jQuery: como obter texto de uma lista suspensa (select) — análise completa

Você já se pegou pensando: «Por que estou recebendo o value, mas preciso do texto?»

Bem-vindo ao PythonLib! Hoje vamos analisar um dos problemas mais comuns enfrentados tanto por iniciantes quanto por desenvolvedores frontend experientes. Você cria um formulário bonito, adiciona uma lista suspensa (select box), escreve um manipulador em jQuery… e de repente percebe que precisa não do value (código numérico do país, ID do produto ou algo similar), mas do texto legível que o usuário vê no menu.

Essa pergunta no Stack Overflow acumulou milhares de visualizações e dezenas de respostas. Não vamos apenas copiar uma delas — vamos detalhar o problema, mostrar várias formas de resolvê-lo e fornecer código pronto que você pode inserir no seu projeto agora mesmo. Vamos lá!

Problema: value vs. text

Imagine um HTML típico:

<select id="citySelect">\n    <option value="1">Moscou</option>\n    <option value="2">São Petersburgo</option>\n    <option value="3">Novosibirsk</option>\n</select>

Quando o usuário seleciona «São Petersburgo», o código jQuery padrão $('#citySelect').val() retornará «2». E se você precisar exibir na página exatamente «São Petersburgo»? Ou enviar para análise o nome legível? É aí que começa a mágica da navegação DOM.

Solução nº1: abordagem clássica com .text()

A maneira mais simples e intuitiva é obter o elemento <option> selecionado e, em seguida, extrair seu conteúdo de texto.

$('#citySelect').on('change', function() {\n    var selectedText = $(this).find('option:selected').text();\n    console.log('Você selecionou:', selectedText);\n});

Como funciona?
\n$(this) — referência ao nosso select (dentro do manipulador de evento).
\n.find('option:selected') — procuramos entre os options filhos aquele que possui o atributo selected.
\n.text() — extraímos o texto puro (sem tags HTML).

Bônus: se você tiver vários selects na página, use classe ou ID em vez de this.

Solução nº2: usando .children() e .filter()

Às vezes é mais conveniente trabalhar filtrando elementos filhos. Especialmente se você tiver aninhamento complexo ou tags personalizadas.

$('#citySelect').on('change', function() {\n    var selectedText = $(this).children('option:selected').text();\n    // Alternativa com filter:\n    // var selectedText = $(this).children('option').filter(':selected').text();\n    alert('Cidade selecionada: ' + selectedText);\n});

A diferença entre find() e children() é que children() olha apenas para os descendentes diretos, enquanto find() olha para todos os descendentes de qualquer nível. Para um select padrão isso não faz diferença, mas é útil saber.

Solução nº3: obtendo o texto ao carregar a página

Muitas vezes é necessário exibir o texto selecionado imediatamente, sem esperar pelo evento change. Por exemplo, ao inicializar um formulário.

$(document).ready(function() {\n    var initialText = $('#citySelect option:selected').text();\n    $('#selectedCityDisplay').text('Cidade atual: ' + initialText);\n});

Este código será executado uma vez ao carregar o DOM e escreverá o texto do option selecionado por padrão no elemento com ID selectedCityDisplay.

Solução nº4: função auxiliar universal

Se você está desenvolvendo uma aplicação séria, faz sentido extrair a lógica para uma função separada. Assim o código fica mais limpo e reutilizável.

function getSelectedText(selectId) {\n    return $('#' + selectId + ' option:selected').text();\n}\n\n// Uso:\n$('#citySelect').on('change', function() {\n    var text = getSelectedText('citySelect');\n    co