Antes que nada, hola a todos este es mi primer post en el blog y espero no sea el ultimo porque desde hoy voy a colaborar aquí esperando que la información publicada sea de ayuda a todos.

Y pues empezamos, la idea es crear un script que al seleccionar el país nos muestre un combo con los estados de este y al seleccionar un estado nos muestre las ciudades del estado, aquí un ejemplo:

Ejemplo

Esto utilizando Jquery, php y Mysql, el código que aquí se utilizara es utilizando una pequeña clase para uso de mysql que hice hace algunos días y que pueden encontrar aquí, aunque en los archivos de descarga pondré los 2 utilizando la clase y sin ella.

Bueno para empezar mi base de datos se llama poblaciones y estas son las tablas que necesitamos:

PLAIN TEXT
MySQL:
  1. País:
  2. CREATE TABLE `pais` (
  3. `idpais` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  4. `pais` VARCHAR(50) DEFAULT NULL,
  5. PRIMARY KEY USING BTREE (`idpais`)
  6. ) ENGINE=MyISAM;
  7.  
  8. Estado:
  9. CREATE TABLE `estado` (
  10. `idestado` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  11. `estado` VARCHAR(50) DEFAULT NULL,
  12. `pais` INT(11) NOT NULL DEFAULT '0',
  13. PRIMARY KEY USING BTREE (`idestado`)
  14. ) ENGINE=MyISAM;
  15.  
  16. Ciudad:
  17. CREATE TABLE `ciudad` (
  18. `idciudad` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  19. `ciudad` VARCHAR(50) NOT NULL DEFAULT '',
  20. `estado` INT(11) NOT NULL DEFAULT '0',
  21. `pais` INT(10) UNSIGNED NOT NULL DEFAULT '0',
  22. PRIMARY KEY USING BTREE (`idciudad`)
  23. ) ENGINE=MyISAM;

y este código de la pagina donde estarán nuestros combos:
"com_dependientes.php"

PLAIN TEXT
PHP:
  1. <?php
  2. include("mysql_inc.php");
  3. $mysql = new MySql_Class;
  4. $mysql->user="root";
  5. $mysql->password="root";
  6. $mysql->db="poblaciones";
  7. $mysql->server="localhost";
  8. $mysql->conection();
  9. ?>
  10. <script src="js/jquery.js"></script>
  11. <script>
  12. $(document).ready(function(){
  13.     $("select").change(function(){
  14.         // Vector para saber cuál es el siguiente combo a llenar
  15.  
  16.         var combos = new Array();
  17.         combos['pais'] = "estado";
  18.         combos['estado'] = "ciudad";
  19.         // Tomo el nombre del combo al que se le a dado el clic por ejemplo: país
  20.         posicion = $(this).attr("name");
  21.         // Tomo el valor de la opción seleccionada
  22.         valor = $(this).val()       
  23.         // Evaluó  que si es país y el valor es 0, vacié los combos de estado y ciudad
  24.         if(posicion == 'pais' && valor==0){
  25.             $("#estado").html('    <option value="0" selected="selected">----------------</option>')
  26.             $("#ciudad").html('    <option value="0" selected="selected">----------------</option>')
  27.         }else{
  28.         /* En caso contrario agregado el letreo de cargando a el combo siguiente
  29.         Ejemplo: Si seleccione país voy a tener que el siguiente según mi vector combos es: estado  por qué  combos [país] = estado
  30.             */
  31.             $("#"+combos[posicion]).html('<option selected="selected" value="0">Cargando...</option>')
  32.             /* Verificamos si el valor seleccionado es diferente de 0 y si el combo es diferente de ciudad, esto porque no tendría caso hacer la consulta a ciudad porque no existe un combo dependiente de este */
  33.             if(valor!="0" || posicion !='ciudad'){
  34.             // Llamamos a pagina de combos.php donde ejecuto las consultas para llenar los combos
  35.                 $.post("combos.php",{
  36.                                     combo:$(this).attr("name"), // Nombre del combo
  37.                                     id:$(this).val() // Valor seleccionado
  38.                                     },function(data){
  39.                                                     $("#"+combos[posicion]).html(data);    //Tomo el resultado de pagina e inserto los datos en el combo indicado                                                                               
  40.                                                     })                                               
  41.             }
  42.         }
  43.     })       
  44. })
  45. </script>
  46. <form id="form1" name="form1">
  47. <div>
  48. <select name="pais" id="pais">
  49.     <option selected="selected" value="0">---------</option>
  50. <?
  51. $query = $mysql->query("SELECT * FROM pais");
  52. if($query["amount"]>0){                       
  53.     foreach($query["data"] as $rs){
  54.     ?>
  55.         <option value="<?=$rs["idpais"]?>"><?=$rs["pais"]?></option>
  56.     <?
  57.     }
  58. }
  59. ?>
  60.                         </select>
  61. </div>
  62.  
  63. <div>
  64. <select id="estado" name="estado">
  65.     <option value="0" selected="selected">----------------</option>
  66. </select>
  67. </div>
  68.  
  69. <div>
  70. <select id="ciudad" name="ciudad">
  71.     <option value="0" selected="selected">-------------------</option>
  72. </select>
  73. </div>
  74. </form>

y este es el código de "combos.php" :

PLAIN TEXT
PHP:
  1. <?
  2. include("mysql_inc.php");
  3. $mysql = new MySql_Class;
  4. $mysql->user="root";
  5. $mysql->password="root";
  6. $mysql->db="poblaciones";
  7. $mysql->server="localhost";
  8. $mysql->conection();
  9. $idcombo = $_POST["id"];
  10. $action =$_POST["combo"];
  11. switch($action){
  12.     case "pais":{
  13.         $query =$mysql->query("SELECT idestado,estado FROM estado WHERE pais = $idcombo order by estado ASC");
  14.         foreach($query["data"] as $rs)
  15.             echo '<option value="'.$rs["idestado"].'">'.htmlentities($rs["estado"]).'</option>';   
  16.     break;
  17.     }
  18.     case "estado":{       
  19.         $query =$mysql->query("SELECT idciudad,ciudad FROM ciudad WHERE estado= $idcombo order by ciudad ASC");
  20.         foreach($query["data"] as $rs)
  21.             echo '<option value="'.$rs["idciudad"].'">'.htmlentities($rs["ciudad"]).'</option>';   
  22.     break;
  23.     }
  24. }
  25. ?>

y por último acá los archivos aquí los archivos en descarga con la siguiente estructura:
conclase -> capeta con el script tal y como esta en este post
sinclase -> carpeta con el script sin el uso de la clase
combos_dependientes.sql -> Archivo de texto con las ciudades, estados de méxico, solo las tablas ustedes crean la base de datos e insertan estas y cambian el nombre de la base datos en el script y listo tiene que funcionar de la mejor manera.

Date una vuelta por mi Blog para más ejemplos :D -> http://jjeb.wordpress.com/