Muchas veces necesitamos crear combos que se llenen según lo que elegimos en otro combo, por ejemplo si tenemos un combo paises queremos que cuando se elija un país, otro combo se llene con las ciudades o estados.
Seguramente haz visto otros tutoriales y ejemplos pero estos son muy dificiles de modificar a lo que tu deseas, asi que he decidio implementar estos combos dependientes con jquery y con 2 archivos php llamados combo1.php y combo2.php, donde puedes modificar facilmente lo que desees que haga el combo.
Crear los combos dependientes
Veamos primero el codigo html que vamos a usar para este ejemplo
1 2 3 4 5 6 7 8 9 |
Ojo: puedes cambia el nombre de los combobox al que desees pero no modifiques el ID
Implementando la función JQuery
Voy a postear el codigo unicamente para el primer combo, ya que el segundo es practicamente igual (si deseas ver el codigo completo basta que descargues el ejemplo)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function(){ // Creamos el evento change para detectar el elemento elegido $("#combo1").change(function () { $("#combo1 option:selected").each(function () { // capturamos el valor elegido elegido=$(this).val(); // Llamamos al archivo combo1.php $.post("combo1.php", { elegido: elegido }, function(data){ // Asignamos las nuevas opciones para el combo2 $("#combo2").html(data); // reseteamos el combo3 $("#combo3").html(""); }); }); }) }); |
Modificando las opciones mostradas
Si descargas el ejemplo veras que hay 2 archivos: combo1.php y combo2.php los cuales contiene un echo que segun el valor enviado imprime el contenido del combo2 y combo3 respectivamente. Si quisieras hacer que invoquen una base de datos simplemente pega tu codigo de conexión con un bucle que imprima el contenido del combo, es decir una cadena con los select.
1 2 3 4 5 6 | $rpta= ' <option value="op2_1">Option1</option> <option value="op2_2">Option2</option> <option value="op2_3">Option3</option> '; echo $rpta; |
Puedes descargar todo el codigo AQUI
Puedes ver la demo AQUI
Hola, buenas tardes, baje tu código de ejemplo pero no me funciona, el error que tiene es que $_POST["elegido"] no tiene ningún valor. Como le hago para que me enví el valor de la opcion seleccionada?
De antemano gracias por tu atención y por el código. Saludos!!
Hola
Si revisas el codigo, en esta linea:
elegido=$(this).val();
Es donde recojo el valor del combo.
La variable $_POST["elegido"] unicamente existe dentro de combo1.php o en combo2.php.
¿O te refieres al momento de enviar el formulario?
Buenas noches Amigo…. primero que nada gracias por publicar esto me ha sido de mucha ayuda…. una pregunta estoy tratando de colocarle mas opciones al combo1, me la toma, es decir se ve pero el select del combo2 no tiene ningun valor…. Agradeceria toda la ayuda que pudieses aportar… Gracias de Antemano
Hola, funciona perfecto, y facilmente modificable, gracias.
No manches!!!!!!!!!!!!!!
De maravilla este ejemplo!!!! y mas por que lo compartiste!!!!!
es la primera vex que comento algo!! y la verdad esto esta GENIAL (AWESOME)!!!!
FELICIDADES Y MIL GRACIAS ME FUNCIONO DE MARAVILLA ya me habia cansado de buscar!!!
Hay muchas posibilidades, para saber que esta ocurriendo es necesario que verifiques usando la consola de firebug a ver si hay algun error javascript o PHP.
Hola
No entra a ejecutar el php
$.post(“combo1.php”, { elegido: elegido }, function(data){
Que puede ser ?
Saludos !!!
Podrían ser muchas cosas, es necesario que uses firebug y en la consola veas que error esta produciendo o cual es la respuesta del archivo PHP
Excelente tutorial. Lo encontré super sencillo y muy practico. Gracias por compartirlo. Cada vez me enamoro más del Jquery… jajaja
para introducirlo en otra página, sólo lo copio y pego tal cual esta en el eejemplo??
gracias.
Basicamente si, aunque yo recomiendo no andar copiando y pegando código, mínimo hay que entenderlo primero el código para que en caso surja algún error sepamos que es.
Hola, buen dia saludos. Excelente ayuda aunque tengo un problemilla , modifique el combo 3, es dinamico y el problema esta en que no puedo tomar el valor seleccionado. Lo necesito para luego usarlo en una sentencia sql.ya llevo rato en eso y nada. Por favor, ayuda.
si, gracias, de hecho si lo estuve leyendo. Aún no he podido llenarlo todo, y como que de repente me confunfundo por tantos nombres, pero Me has ayudado muchisimo, MIL GRACIAS
NO entiendo xq no puedes tomar el valor seleccionado enviando el formulario, suponiendo que se llame combo3 al ser enviado usando POST y colocarlo en SQL sería algo como SELECT * FROM mitabla WHERE alguncampo LIKE ‘.$_POST[combo3].’