jQuery – Seleccionar opción de un desplegable
Si buscáis por internet cómo seleccionar valores de un desplegable con jQuery os saldran multitud de ejemplos en los que todo el mundod ice que les funciona. Empecemos con el artículo jQuery – Seleccionar opción de un desplegable.
Todo está sujeto a qué versión de jquery que se trabaje, o qué navegador… Es por eso que aquí os dejo unos ejemplos que podréis probar para ver si a vosotros os funciona.
Seleccionar una opción determinada$('#id option[value=valorDeLaOpcionDelSelect]').prop('selected', 'selected');
Si no te funciona el código anterior, prueba con la fucnión attr() de jquery:$('#id option[value=valorDeLaOpcionDelSelect]').attr('selected', 'selected');
Seleccionar la primera opción del select
Ahora vamos con algo más específico, la selección de la primera opción del desplegable
$("#id option:first").prop("selected", "selected");
En ocasiones, no funciona y hay que asegurarnos de antes de seleccionar, y hay que limpiar la selección anterior para que no de error:
$("#target option:selected").attr("selected", false);
$("#id option:first").attr("selected", "selected");
Si no os funciona con este código, probad con este otro:
$("#target option:selected").prop("selected", false);
$("#id option:first").prop("selected", "selected");
Otra, un poco mas rebuscada
Esta os la dejo a vosotros para que hagáis pruebas$("select[name='nombreDelSelect']").find("option[value='valorDeLaOpcion']").attr("selected",true);
Bueno, son varios ejemplos para hacer una función parecida. El escoger cual os sirve, es cosa vuestra, teniendo en cuenta de las versiones de jquery o navegador con los que trabajáis.
Espero que os haya sido de utilidad el artículo jQuery – Seleccionar opción de un desplegable.
Más información
hola, y si no quiero que se preseleccione ninguna de las opciones? pues con el fin de que el usuario tenga que seleccionar siempre en la lista.
Hola Cesar,
lo normal es poner en la primera opción un valor en blanco para que puedas validarlo antes de enviar el formulario. De este estilo:
[select]
[option value=»»]– Escoja una opción –[/option]
[option value=»1″]Option 1[/option]
[option value=»2″]Option 2[/option]
[option value=»3″]Option 3[/option]
[/select]
Como puedes ver, si el valor es blanco, muestrar error. Otras cosas que se hacen es poner el primer valor en blanco, y esconderlo:
[select]
[option value=»» selected style=»display:none»][/option]
[option value=»1″]Option 1[/option]
[option value=»2″]Option 2[/option]
[option value=»3″]Option 3[/option]
[/select]
También hay documentación, pero yo no lo he probado, que con jQuery puedes hacerlo con:
$(«#miSelect»).prop(«selectedIndex», -1);
Espero que te sea de utilidad