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
[cc lang=»html»]
[/cc]
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)
[cc lang=»javascript»]
$(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(«»);
});
});
})
});
[/cc]
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.
[cc lang=»php»]
$rpta= ‘
Option1
Option2
Option3
‘;
echo $rpta;
[/cc]
Puedes ver la demo AQUI
[social-download button_id=»8ec915b141ed2f904″ dl_id=»https://www.miguelmanchego.com/wp-content/uploads/2009/01/combos_dependientes.zip» theme=»blue» message=»Comparte este post para descargar los archivos del ejemplo» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
