jQuery como seleccionar una opción de Select

Código muy práctico para utilizarlo una vez recibimos datos vía AJAX y debemos seleccionar una de las opciones. En jQuery puedes seleccionar una opción de un Select según su valor:

Tenemos el siguiente select de provincias:

<select id=”provincias”>
<option value=”1″>Tarragona</option>
<option value=”2″>Albacete</option>
<option value=”3″>Castellón</option>
<option value=”4″>Almería</option>
</select>

Veamos la sentencia para seleccionar una opción según su valor:

$("#provincia option[value="+ valor +"]").attr("selected",true);

Con este código según ‘valor’ se seleccionará por defecto una opción u otra. Si valor es 1, se seleccionará Tarragona, por ejemplo.

Ahora veremos dos ejemplos. Uno con valores numéricos y otro con valores de texto. El de texto también con espacios. Veámos el ćodigo en acción:

See the Pen Jquery – Seleccionar option de select por valor by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Si os fijáis en el ejemplo de valores numéricos, lo hacemos con:

$("#provincia option[value=2").attr("selected",true);

Pero en el de texto, hay una diferencia que hace que podamos poner valores separados por espacios. Las comillas (fijaos que La Rioja está entre comillas:

$("#provincia option[value='La Rioja'").attr("selected",true);

Por lo tanto quedaría algo así si queremos hacerlo genérico y no con un valor determinado:

$("#provincia option[value='"+ valor +"']").attr("selected",true);

Así pues, cuando recibimos los datos por AJAX y según el valor, debemos seleccionar una opción u otra, lo haremos con éste código.

Espero que os sea de utilidad el artículo jQuery como seleccionar una opción de Select para vuestro código.


Más información

18 comentarios

  • Javier Otero

    Tu ejemplo no funciona con la version 1.3.1 de jquery mobile

  • daron

    Buen snippet. Gracias

  • Davan Palma Elí

    Gracias me servio ese código para regresar mi lista a la posición 0

  • xabi

    ¿Sabeis si se puede hacer lo mismo pero en vez de con el valor con el texto?

  • varSoft

    El código correcto sería:

    $(“#provincia > option[value=”+ valor +”]”).attr(“selected”,true)

    Saludos,

    • RocaTic

      Si. Quizás utilizando el selector de hijo el código sea mas preciso. Aunque el código que propongo en el post funciona correctamente, puede que en algunas versiones no sea correcto, por lo que poniendo el selector de hijo lo hacemos mucho mas preciso. Os dejo el enlace para mas información:
      http://api.jquery.com/child-selector/

  • Heriberto

    Hola, Quisiera saber como puedo hacer esta función.
    Tengo dos select 1 , select 2 y quiero que al momento que seleccione una de las opciones del select 1 me vierta los valores que tengo predeterminados para el select 2.

  • jorge Antonio

    se puede hacer con texnto en lugar un valor??

  • Laurien

    Gracias!!, me funcionó perfecto

  • dartvader

    Funciono perfectamente, muchas gracias!

  • Buenas, no funciona cuando el valor tiene espacios, que puedo hacer?

    • Hola Martin,
      he añadido ejemplo de cómo hacerlo con texto que contiene espacios. Fíjate que concretamente lo hago con La Rioja. La clave está en poner las comillas simples. Revisa de nuevo el artículo y verás el ejemplo.

  • JoseSan

    Buenas, el post tiene algún tiempo, pero tengo un problema similar, por favor, si me pudieran ayudar. Quiero hacer exactamente lo que se plantea acá, pero con un objeto DropDownList de Asp.net, pense era igual como se explica, pero no me funciona:

    Lo declaro:

    @Html.DropDownList(“CodeList”, null, “Seleccione”, htmlAttributes: new { @class = “cmbSearchGuideCodeList”, @id = “cmbSearchGuideCodeList” })

    Luego dentro del javaScript:

    1) $(“#cmbSearchGuideCodeList”).val(origen).change();
    2) $(“#cmbSearchGuideCodeList”)[0].selectedIndex = 0;
    3) $(“#cmbSearchGuideCodeList option[value=” + origen + “]”).attr(“selected”, true);
    4) $(“#cmbSearchGuideCodeList option[value='” + origen + “‘]”).attr(“selected”, true);
    5) $(“#cmbSearchGuideCodeList > option[value=” + origen + “]”).attr(“selected”, true);
    6) document.getElementById(“cmbSearchGuideCodeList”).selectedIndex = 3;

    En ninguno de los caso logro hacer que el DropDownList, me muestre algún valor seleccionado, la variable origen, tiene uno de los código que se encuentra en la lista del objeto. No comprendo como hacer?? Agradecería mucho su ayuda, gracias

    • Hola JoseSan,
      no dominio Asp.net, pero podrías confirmar que el dropdown se carga antes de asignar con jQuery el valor?
      Podrías poner el el código jquery después del $(document).ready() para asegurar que el desplegable está cargado. A mi me pasaba en ocasiones que el el objeto con el que quiero trabajar, todavía no está creado, por lo que se intenta asignar un valor a un objeto no creado.
      $( document ).ready(function() {
      // Asignación de valor.
      });

      • JoseSan

        Trescomatres, muchas gracias por tu pronta respuesta, coloque estas lineas como prueba, para ver que esta pasando:

        alert(document.getElementById(“cmbSearchGuideCodeList”).selectedIndex);
        document.getElementById(“cmbSearchGuideCodeList”).value = origen;
        alert(document.getElementById(“cmbSearchGuideCodeList”).value);
        alert(document.getElementById(“cmbSearchGuideCodeList”).selectedIndex);

        y el objeto si esta tomando su valor e indice dentro de su lista interna. El problema sigue siendo que el control no refresca, se muestra igual como si no fuera cambiado su valor. Yo siempre he trabajado del lado del Backend, de aquí mis novatadas tan grandes en el Front, sorry.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*