Miguel Manchego » dependiente http://www.miguelmanchego.com Desarrollador web freelancer php, css, ajax, cms.. Wed, 04 Jan 2012 13:10:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Combos dependientes AJAX http://www.miguelmanchego.com/2009/combos-dependientes-ajax-jquery/ http://www.miguelmanchego.com/2009/combos-dependientes-ajax-jquery/#comments Wed, 07 Jan 2009 17:54:10 +0000 admin http://www.miguelmanchego.com/?p=111

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
<select name="combo1" id="combo1"> 
    <option value="op1_1">Option1</option>
    <option value="op1_2">Option2</option>
    <option value="op1_3">Option3</option>    
</select>
<select name="combo2" id="combo2"> 
</select>
<select name="combo3" id="combo3"> 
</select>

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

]]> http://www.miguelmanchego.com/2009/combos-dependientes-ajax-jquery/feed/ 39