Combos dependientes utilizando PHP, Mysql y jquery( Javascript)

29 07 2008

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:

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”


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<?
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
var combos = new Array();
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>
<body>
<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>
</body>
</html>

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)
echo '<option value="'.$rs["idestado"].'">'.htmlentities($rs["estado"]).'</option>';
break;
}
case "estado":{
$query =$mysql->query("SELECT idciudad,ciudad FROM ciudad WHERE estado= $idcombo order by ciudad ASC");
foreach($query["data"] as $rs)
echo '<option value="'.$rs["idciudad"].'">'.htmlentities($rs["ciudad"]).'</option>';
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 .