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:
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:
-
País:
-
CREATE TABLE `pais` (
-
`idpais` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
-
`pais` VARCHAR(50) DEFAULT NULL,
-
PRIMARY KEY USING BTREE (`idpais`)
-
) ENGINE=MyISAM;
-
-
Estado:
-
CREATE TABLE `estado` (
-
`idestado` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
-
`estado` VARCHAR(50) DEFAULT NULL,
-
`pais` INT(11) NOT NULL DEFAULT '0',
-
PRIMARY KEY USING BTREE (`idestado`)
-
) ENGINE=MyISAM;
-
-
Ciudad:
-
CREATE TABLE `ciudad` (
-
`idciudad` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
-
`ciudad` VARCHAR(50) NOT NULL DEFAULT '',
-
`estado` INT(11) NOT NULL DEFAULT '0',
-
`pais` INT(10) UNSIGNED NOT NULL DEFAULT '0',
-
PRIMARY KEY USING BTREE (`idciudad`)
-
) ENGINE=MyISAM;
y este código de la pagina donde estarán nuestros combos:
"com_dependientes.php"
-
<?php
-
include("mysql_inc.php");
-
$mysql = new MySql_Class;
-
$mysql->user="root";
-
$mysql->password="root";
-
$mysql->db="poblaciones";
-
$mysql->server="localhost";
-
$mysql->conection();
-
?>
-
<script src="js/jquery.js"></script>
-
<script>
-
$(document).ready(function(){
-
$("select").change(function(){
-
// Vector para saber cuál es el siguiente combo a llenar
-
-
combos['pais'] = "estado";
-
combos['estado'] = "ciudad";
-
// Tomo el nombre del combo al que se le a dado el clic por ejemplo: país
-
posicion = $(this).attr("name");
-
// Tomo el valor de la opción seleccionada
-
valor = $(this).val()
-
// Evaluó que si es país y el valor es 0, vacié los combos de estado y ciudad
-
if(posicion == 'pais' && valor==0){
-
$("#estado").html(' <option value="0" selected="selected">----------------</option>')
-
$("#ciudad").html(' <option value="0" selected="selected">----------------</option>')
-
}else{
-
/* En caso contrario agregado el letreo de cargando a el combo siguiente
-
Ejemplo: Si seleccione país voy a tener que el siguiente según mi vector combos es: estado por qué combos [país] = estado
-
*/
-
$("#"+combos[posicion]).html('<option selected="selected" value="0">Cargando...</option>')
-
/* 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 */
-
if(valor!="0" || posicion !='ciudad'){
-
// Llamamos a pagina de combos.php donde ejecuto las consultas para llenar los combos
-
$.post("combos.php",{
-
combo:$(this).attr("name"), // Nombre del combo
-
id:$(this).val() // Valor seleccionado
-
},function(data){
-
$("#"+combos[posicion]).html(data); //Tomo el resultado de pagina e inserto los datos en el combo indicado
-
})
-
}
-
}
-
})
-
})
-
</script>
-
<form id="form1" name="form1">
-
<div>
-
<select name="pais" id="pais">
-
<option selected="selected" value="0">---------</option>
-
<?
-
$query = $mysql->query("SELECT * FROM pais");
-
if($query["amount"]>0){
-
foreach($query["data"] as $rs){
-
?>
-
<option value="<?=$rs["idpais"]?>"><?=$rs["pais"]?></option>
-
<?
-
}
-
}
-
?>
-
</select>
-
</div>
-
-
<div>
-
<select id="estado" name="estado">
-
<option value="0" selected="selected">----------------</option>
-
</select>
-
</div>
-
-
<div>
-
<select id="ciudad" name="ciudad">
-
<option value="0" selected="selected">-------------------</option>
-
</select>
-
</div>
-
</form>
y este es el código de "combos.php" :
-
<?
-
include("mysql_inc.php");
-
$mysql = new MySql_Class;
-
$mysql->user="root";
-
$mysql->password="root";
-
$mysql->db="poblaciones";
-
$mysql->server="localhost";
-
$mysql->conection();
-
$idcombo = $_POST["id"];
-
$action =$_POST["combo"];
-
switch($action){
-
case "pais":{
-
$query =$mysql->query("SELECT idestado,estado FROM estado WHERE pais = $idcombo order by estado ASC");
-
foreach($query["data"] as $rs)
-
break;
-
}
-
case "estado":{
-
$query =$mysql->query("SELECT idciudad,ciudad FROM ciudad WHERE estado= $idcombo order by ciudad ASC");
-
foreach($query["data"] as $rs)
-
break;
-
}
-
}
-
?>
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 
-> http://jjeb.wordpress.com/
