jQuery: cómo obtener el texto de una lista desplegable (select) — análisis completo

¿Alguna vez te has sorprendido pensando: «¿Por qué obtengo el value, pero necesito el texto?»

¡Bienvenido a PythonLib! Hoy analizaremos uno de los problemas más comunes que enfrentan tanto principiantes como desarrolladores frontend experimentados. Creas un formulario bonito, agregas una lista desplegable (select box), escribes un controlador en jQuery… y de repente te das cuenta de que necesitas no el value (código numérico de país, ID de producto o algo similar), sino el texto legible que el usuario ve en el menú.

Esta pregunta en Stack Overflow ha acumulado miles de visitas y decenas de respuestas. No solo copiaremos una de ellas: desglosaremos la tarea paso a paso, mostraremos varias formas de resolverla y te daremos código listo que puedes insertar en tu proyecto ahora mismo. ¡Vamos allá!

Problema: value vs. text

Imagina un código HTML típico:

<select id="citySelect">\n    <option value="1">Moscú</option>\n    <option value="2">San Petersburgo</option>\n    <option value="3">Novosibirsk</option>\n</select>

Cuando el usuario selecciona «San Petersburgo», el código jQuery estándar $('#citySelect').val() devolverá «2». Pero, ¿qué pasa si necesitas mostrar en la página exactamente «San Petersburgo»? ¿O enviar el nombre legible a la analítica? Aquí es donde comienza la magia de la navegación del DOM.

Solución n.º 1: enfoque clásico con .text()

La forma más simple e intuitiva es obtener el elemento <option> seleccionado y luego extraer su contenido de texto.

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

¿Cómo funciona?
\n$(this) — referencia a nuestro select (dentro del controlador de eventos).
\n.find('option:selected') — buscamos entre los option hijos aquel que tenga el atributo selected.
\n.text() — extraemos el texto limpio (sin etiquetas HTML).

Bonus: si tienes varios selects en la página, usa una clase o ID en lugar de this.

Solución n.º 2: usando .children() y .filter()

A veces es más conveniente trabajar filtrando los elementos hijos. Especialmente si tienes anidación compleja o etiquetas personalizadas.

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

La diferencia entre find() y children() es que children() solo mira a los descendientes directos, mientras que find() busca en todos los descendientes de cualquier nivel. Para un select estándar esto no importa, pero es útil saberlo.

Solución n.º 3: obtener el texto al cargar la página

A menudo es necesario mostrar el texto seleccionado de inmediato, sin esperar el evento change. Por ejemplo, al inicializar un formulario.

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

Este código se ejecutará una vez al cargar el DOM y escribirá el texto del option seleccionado por defecto en el elemento con ID selectedCityDisplay.

Solución n.º 4: función auxiliar universal

Si estás desarrollando una aplicación seria, tiene sentido extraer la lógica en una función separada. Así el código será más limpio y reutilizable.

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