jQuery: Obtener el texto de la Opción Seleccionada

¿Cuál es la tarea?

En primer lugar permítanme explicar lo que es esta tarea. Si hay un menu seleccionado con varias opciones, cada uno de ellos con un valor de un atributo dado, la tarea es conseguir el texto en la etiqueta de la opción, y no el valor del atributo.

En este escenario vamos a suponer que tenemos el siguiente código HTML:

<select id="my-select">
    <option value="1">value 1</option>
    <option value="2">value 2</option>
</select>

Ten en cuenta que en la página de Documentación oficial del jQuery, el selector se describe en el mismo contexto, pero con una marca diferente:

<select id="my-select">
    <option>valor 1</option>
    <option>valor 2</option>
</select>

El fragmento de código jQuery se parece a lo siguiente:

$(document).ready(function() {
    $("#my-select").change(function() {
        alert($(this).val());
    });
});

Es interesante observar que no hay opciones con valor en el atributo, por lo tanto la selección de un elemento es correcta y el valor devuelto es correcto. El problema es que este código no funciona correctamente una vez que haya un atributo de valor diferente, dentro del valor encerrado en la etiqueta de la opción. En nuestro caso hemos mostrado el marcado en el primer fragmento de código y nos gustaría obtener la cadena el «valor 2» en lugar de «2».

Código fuente

<select id="my-select">
    <option value="1">valor 1</option>
    <option value="2">valor 2</option>
</select>

$(document).ready(function() {
    $("#my-select").change(function() {
        alert($(this).val());
    });
});

Solución

Finalmente la solución, es bastante simple y clara, pero esta vez no es tan «natural» y es definitivamente algo que ustede no se puede esperar! Lo único que haz de hacer es cambiar el selector!

$(document).ready(function() {
    $("#my-select").change(function() {
        alert($('#my-select option:selected').html());
    });
});