synthroid taking instructions

Inicio > Programación Web > jQuery: Obtener el texto de la Opción Seleccionada

jQuery: Obtener el texto de la Opción Seleccionada

martes, 19 de septiembre de 2017 Dejar un comentario Ir a comentarios

¿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());
    });
});

Comparte y diviertete:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • BlinkList
  • Blogosphere
  • Live
  • Meneame
  • MSN Reporter
  • MySpace
  • RSS
  • Suggest to Techmeme via Twitter
  • Technorati
  • LinkedIn
  • email
  • FriendFeed
  • PDF
  • Reddit
  • Wikio IT
  • Add to favorites
  • blogmarks
Categories: Programación Web Tags: ,
  • Claudio Sepulveda

    https://uploads.disquscdn.com/images/bc61e90924de03cecb20ed2c86e26e409626a710d2845d93437fa76d989a4075.jpg Hola:

    En la etiqueta select dale un ID:

    JS:
    console.log($(#areas).val());

    Con esto imprime el arreglo de los seleccionado.

  • cesar

    hola a todos!!

    tengo un input que funciona con autocomplete:

    jQuery(function(){
    $(“#producto”).autocomplete(“reg_update.jsp”);
    });

    me tira una lista de productos de la base de datos, yo necesito obtener el precio del producto seleccionado para calcular el subtotal.. una idea de como puedo hacerlo???

  • Cesar

    Hola raphsoft.. tengo un input que funciona con autocomplete:

    jQuery(function(){
    $(“#producto”).autocomplete(“reg_update.jsp”);
    });

    me tira una lista de productos de la base de datos, yo necesito obtener el precio del producto seleccionado para calcular el subtotal.. una idea de como puedo hacerlo???

  • Soyjesuscristo

    Gracias amigo. Lo que estaba buscando.

  • José Antonio Huerta Escribano

    El mismo texto sería el value, porque recuerda que lo que jalarás en el find es el val.

  • muchas gracias por el tutorial! esta perfecto

  • magga

    hola! tengo el texto de un option y quiiero usarlo como parametro para seleccionarlo es decir algo asi:
    $(“#sAula”).find(“option”).attr(“selected”,”selected”);

    alguien sabe como solucionarlo?

  • Joel

    Mis respetos para usted es muy buen ejemplo me sirvio de mucho saludos y siga aportando…

  • Pingback: Bitacoras.com()

  • Aqui hay otra forma:

    function alertText(vCombo){
    alert(vCombo.options[vCombo.selectedIndex].text);
    }

  • Aqui hay otra forma:

    function alertText(vCombo){
    alert(vCombo.options[vCombo.selectedIndex].text);
    }

Top Footer