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
Tu ejemplo no funciona con la version 1.3.1 de jquery mobile
Javier y RocaTic como estan?
Saben como hacerlo funcionar con Jquery Mobile 1.3.1? eh probado de todo pero no funciona!
Saludos.
Buen snippet. Gracias
Gracias me servio ese código para regresar mi lista a la posición 0
¿Sabeis si se puede hacer lo mismo pero en vez de con el valor con el texto?
El código correcto sería:
$(«#provincia > option[value=»+ valor +»]»).attr(«selected»,true)
Saludos,
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/
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.
Es una de las funciones mas complicadas. Te dejo un enlace donde se realiza la tarea que comentas utilizando AJAX. Seleccionas una opción de Select1, hace la consulta correspondiente y envía al Select2, mediante AJAX las opciones.
http://stackoverflow.com/questions/24811547/how-to-handle-multiple-jquery-ajax-dependent-select-boxes-in-the-same-form
Espero que te sea de utilidad.
Igualmente, intentaré hacer un videotutorial al respecto, porque creo que es una de las tareas mas interesantes que hay (selects dependientes)
se puede hacer con texnto en lugar un valor??
Hola Jorge, hemos creado un pequeño artículo donde lo explicamos: http://blog.trescomatres.com/2017/06/jquery-seleccionar-por-el-texto-y-no-el-valor/
Gracias!!, me funcionó perfecto
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.
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.
});
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.
Donde dice: Si os fijáis en el ejemplo de valores numéricos, lo hacemos con:
hay un error de sintaxis, deberian arreglarlo que puede confundir a las personas
Corregido. Muchas gracias !!!!
Muchas gracias me sirvió tu post.