Como obtener el texto del option de un select con Jquery

Hola.

Hoy les traigo un tip para obtener el texto de la opción seleccionada de una etiqueta <select>.

Basta con utilizar el siguiente código:

var opcion_seleccionada = $(“#id_mi_select option:selected“).text();

Ahora, si lo que se quiere es obtener el valor de esa opción (<option value=”1″> Mi texto</option>)

podemos utilizar el siguiente código

var valor= $(“#id_select”).val();

 

Anuncios

32 comentarios en “Como obtener el texto del option de un select con Jquery

    • Saludos Alberto, disculpa la tardanza, he andado algo atareado 🙂
      mmmmm
      Te sugiero verifiques lo siguiente:

      • El código lo estés utilizando despues de incluir el Jquery
      • El Id sea el correcto.

      De igual manera puedes probar lo siguiente:

      $(function() {
      var opcion_seleccionada = $(“#id_mi_select option:selected“).text();
      });

      Saludos Alberto, si puedes avisame como te fue.

  1. tengo una consulta
    tengo lo siguiente:
    $(document).on(‘change’, ‘.selector3′, function() {
    var programa = $(this).val();
    el valor que me devuelve en la variable var es : CEP..
    siendo que debería ser : CEP STD….
    me corta el carácter por el espacio ..¿.como soluciono esto ??
    muchas gracias

    • Hola Ximena.

      mmm no veo error en el código presentado.
      Ese caso que comentas me ha sucedido cuando en he cerrado de manera incorrecta el value
      algo asi como

      o

      Revisa tu html.
      Si ese no es el error sería bueno que compartas tu código o pases una URL para revisar a fondo y ayudarte mejor.

      Saludos Ximena

  2. eduardogarrido dijo:

    Hola daronwolff, ya me recorrí varios tutoriales y no logro mantener la opción seleccionada en cada select, el problema es que estos datos están en el mismo formulario donde los usuarios constantemente actualizan otro tipo de información. Por lo tanto si no me mantiene el valor cuando ingresen a editar otros datos, los del select seguramente quedaran en blanco. No puedo hacer que estos datos sean obligatorios ya que seria poco serio obligarlos a volver a elegir País, Provincia y Ciudad cada vez que entran a actualizar alguna información.
    Los select son puro texto, no los carga de una base de dato ni nada. Encontré como mantener la opción elegida con php (tengo que agregar ) luego de cada option) pero la lista de países, provincias y ciudades es enorme para volver a editarla para agregar el php a cada opción remplazando uno a uno los value nuevamente.

    Probé varias opciones jquery que encontre en internet, incluso la que detallas acá pero ninguna me funciono,

    Espero puedas ayudarme muchas gracias.

    Elige un país
    Argentina

    Elige una provincia
    Buenos Aires
    Catamarca
    Chaco

    Elige una ciudad
    Capital Federal
    Pilar
    Vicente López

    • Hola!!
      Gracias por escribir.
      MMmmmm sabes… se me ocurre lo siguiente.
      Si ya tienes en base de datos, y con PHP almacenas el resultado en una variable, podrías seleccionar la opción del a partir del contenido de esa variable.
      <?php
      echo $nombre_ciudad_selecionada = “Chaco”;
      ?>

      $(“#ciudad option[value=”]”).attr(“selected”, true);

      <select id="ciudad“>

      Catamarca

      Chaco

      Prueba el código y me dices si te sirve. Si tienes dudas o a lo mejor y no es lo que necesitas. En caso de que no quede escribeme y vemos como lo resolvemos.

      Saludos

  3. eduardogarrido dijo:

    Probé el código pero no pude lograr que funcione, te paso la url de la página donde esta el formulario.
    http://humaneo.com.ar/nuevositio/publica-tu-curriculum
    El problema es en País, Provincia y Ciudad, al momento de enviar el formulario los tres vuelven a quedar en “Elige un ….”.
    Como te dije las opciones del select están puesta manualmente en una lista, no carga desde la base una base de datos, solo al momento de imprimir en el single uso un echo con el meta_key (pais, provincia, ciudad).
    Pero si entro a editar esos datos una vez logueado no me recuerda la opción que elegí en esos select, y al actualizar el formulario esa info se pierde si no vuelvo a seleccionar.
    Lo mismo le va a pasar a los demás usuarios por eso necesito que reemplace “Elige un pais” por el país que selecciono el usuario y lo mismo para Provincia y Ciudad.
    Gracias por responder tan rápido.
    Saludos

  4. Matias dijo:

    Si quisiera hacer lo mismo, es decir, obtener una opción en particular sin utilizar un id u otro identificador como hago? pienso que con algún selector pero no logro hacerlo todavía. Por ej

    Opción 1
    Opción 2
    Opción 3
    Opción 4
    Opción 5

    Quizás haya alguna forma de obtener una de las opciones también habiendo más de un select ..

    • Hola, gracias por escribir, no me quedó muy claro
      ¿Entonces cúal es el criterio para seleccionar tu option?
      mmm
      Si quieres por valor puedes usar
      $(‘#miselect option[value=”VALOR_DESEADO”]’)
      Si quieres por posición
      $(‘#miselect option:eq(1)’)
      Por la etiqueta de texto contenida dentro del option etiqueta
      $(‘#miselect option:contains(“etiqueta”)’)

  5. MarkFL dijo:

    Vaya de casualidad di con este post y me parece puede ayudarme a resolver el siguiente detalle:
    Necesito mostrar una lista con la etiqueta para mostrar las organizaciones que atienden emergencias, cuando den clic a alguna de las opciones de la lista se muestre en otra linea los teléfonos de contacto y más info es todo lo que necesito.

    Alguna sugerencia u orientación sera agradecida, saludos!

    • Hola!! Gracias por escribir.
      No entendí si necesitas una lista o un
      Que te parece algo asi??

      select name=”mi_lita”id=”telefonos_emergencia”>
      option value=”+52 77-66-55 y +52 77-66-28″ > Cruz Roja
      option value=”+52 65-92-55 y +52 65-92-28″ > Cruz Verde
      option value=”+52 09-13-55 y +52 09-33-28″ > Cruz Morada
      option value=”+52 10-10-55 y +52 07-66-28″ > Angeles Verdes
      /select>

      $(document).ready(function(){
      $(“#telefonos_emergencia”).change(function(){
      numero = $(this).val()
      $(“#donde_quiero_poner”).html(“El número es “+numero)
      })
      })

  6. Kazz dijo:

    Saludos, me encontre con este blog y me parece excelente, sabes estoy atorado con select dinamico de 4 niveles, espero puedas ayudarme por favor.

    Te comento como esta el asunto… Es select dinamico de cuatro niveles generados a partir de jquery trabaja perfecto, el asunto es que cuando hago el insert a la BD. solo me envia el valor del ID que en la base es campo llave y lo que quiero es enviar la opcion seleccionada en el Select.

    Espero haberme explicado y que puedas ayudarme…

    Gracias.

  7. Kazz dijo:

    ok, gracias por la respuesta rapida …

    query(“SET NAMES ‘utf8′”);
    $query=”select * from secciones order by NombreSeccion asc”;
    if ($result = $conexion->query($query)) {
    echo “SELECCIONA LA SECCI&OacuteN…”;
    while ($row = $result->fetch_assoc()){
    echo “”.$row[‘idSeccion’].” – “.$row[‘NombreSeccion’].””;
    }
    $result->free();
    }else{
    echo “NO HAY OPCIONES…”;
    }
    mysqli_close($conexion);
    ?>

    ———–
    <?php

    ‘.$registroprincipal[‘NombreSeccion’].’
    ‘.$registroprincipal[‘NombreSubSeccion’].’
    ‘.$registroprincipal[‘NombreSerie’].’
    ‘.$registroprincipal[‘NumeroSerie’].’

    ?>

    EL FORM esta como sigue:

  8. yei dijo:

    Hola, necesito tu ayuda, estoy tratando de mostrar en un label el valor que obtengo de un select, hice tu ejemplo, pero no me funciona, no se si estoy haciendo bien las cosas, serias tan amable de ayudarme, gracias!

    • Hola Yei! claro, con gusto.
      Podrías mostrarme el código HTML, y Javascript que estás usando.
      Sería más facil si creas un jsfindle y me pasas la liga. Así puedo ayudarte mejor.
      Saludos

  9. Amairani Fernanda dijo:

    Buen día!
    Tengo estas lineas de código de las cuales no se si sea correcta la manera que la pongo, ya que no me arroja ningun dato que necesito.

    GuardarCancelar

    Si me puedes ayudar te agradecería demasiado.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s