Selects dependientes

[Lerolero]

Hola,

Tengo el siguiente codigo:

Código Javascript:

/*Select Anidado Departamento */  
    $(document).ready(function(){
    $('#pais').change(function(){
         var id=$('#pais').val(); 
    $("#departamentos").load('Modulos/carga_departamento.php?id='+id);
        });
     /*Select Anidado Ciudad */
 
    $('#departamento').change(function(){
         var id=$('#departamento').val(); 
    $("#ciudades").load('Modulos/carga_ciudad.php?id='+id);
                    
        });
   });
 

En el formulario:

Código HTML:

<label>* Departamento:</label>
               <div id="departamentos">
                <!-- Si md no tiene ningun valor muestra este select--> 
                <!-- Crea el select que se llena con datos dependiendo de lo que se seleccione en el select de pais-->
                <select  disabled="disabled" name="departamento" id="departamento">
                    <option value="" selected="selected" >Selecciona opci&oacute;n</option>
                </select></div>
 
            <!-- Crea el select que se llena con datos dependiendo de lo que se seleccione en el select de departamento-->
            <label>* Ciudad:</label> 
            <div id="ciudades"> 
                <select disabled="disabled" name="ciudad" id="ciudad">
                    <option value="" selected="selected" >Selecciona opci&oacute;n</option>
                </select><!--Cierra el select-->
            </div>
 

Y los respectivos selects:
cargar_departamento.php

Código PHP:

$obj_agenda = new sQuery();
$query = 'SELECT ID, NOMBRE FROM t_departamento WHERE ACTIVO_ID=2 AND RELACION='.$_GET['id'].' ORDER BY NOMBRE';
$result = $obj_agenda->executeQuery($query);
 
 
// Comienzo a imprimir el select
echo "<select name='departamento' id='departamento'>";
echo "<option value=''>Seleccionar opci&oacute;n</option>";
while ($row = mysql_fetch_array($result)) {
    echo '<option value="' . $row['ID'] . '">
                           ' . htmlentities($row['NOMBRE']) . '
                         </option>';
}
 
echo "</select>";
 

cargar_ciudad.php

Código PHP:

$obj_agenda = new sQuery();
$query = 'SELECT ID, NOMBRE FROM t_ciudad WHERE ACTIVO_ID=2 AND RELACION='.$_GET['id'].' ORDER BY NOMBRE';
$result = $obj_agenda->executeQuery($query);
 
 
// Comienzo a imprimir el select
echo "<select name='ciudad' id='ciudad'>";
echo "<option value=''>Seleccionar opci&oacute;n</option>";
while ($row = mysql_fetch_array($result)) {
    echo '<option value="' . $row['ID'] . '">
                           ' . htmlentities($row['NOMBRE']) . '
                         </option>';
}
 
echo "</select>";
 

Esto solo me carga el primer select, el segundo que es el de ciudades no hace nada.

[Rosencrantz]

Al traer un elemento HTML a traves de ajax estos aparecen "muertos" es decir que no responden a ningun evento en particular en este caso el 'change', debemos entonces "revivirlos" para lo cual hay dos alternativas live() y delegate(), usaremos el live() aunque algunos puristas del javascript dicen que es mejor el delegate por razones de desempeño aunque para cosas pequeñas la diferencia es casi nula. En fin prueba esto.

Código Javascript:

$('#departamento').live('change', function(){
var id=$(this).val(); // This se refiere al elemento que ejecuta el evento
 $("#ciudades").load('Modulos/carga_ciudad.php?id='+id);
 
});
 

[Lerolero]

Gracias!!!...Llevaba hace rato con eso y no me daba.........No sabia que existía lo del live() y delegate()