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