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”
<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 .
una pregunta como puedo hacer un clase a parte con una funcion generica que llene los combos con (nombreCombo, URL) donde la url sera la consulta(select) y solo llamarle desde cualquier pagina….. y como llamo a esa funcion
gracias
@gabriel : No entendi tu pregunta.. si kieres agregame a tu messenger y me puedes explicar lo que necesitas y le damos solución.. mi correo es puru28(arroba)hotmail.com
necesito hacer una pagina con dependencia de combos
Una pregunta, tengo una base de datos con, colonia, ciudad, estado, pais al momento de seleccionar el pais en la 1er lista/menu, me muestra la seleccion que hice y me pone los estados que corresponden a ese pais, al momento de seleccionar la 2a lista/menu, el estado, me borra de la 1er lista/menu el nombre del pais que habia seleccionado y el nombre del estado que seleccione y si me muestra las ciudades que corresponden al estado que seleccione, pero no me deja los nombres de pais y estado; selecciono la ciudad y me muestra las colonias que corresponden a la ciudad y al finalizar no me muestra los nombres que seleccione.
Me ha parecido genial, simplificado y senzillo.
Llevo tiempo buscando soluciones a selects dependientes, y creo que ésta es perfecta.
Sólo me falta hacer que al seleccionar el último select me escupa los resultados, pero encontraré cómo hacerlo….
Gracias !!!
hola a todos quisiera saber si alguno de ustedes que saben y de php y todo esto me pueden ayudar, trato de hacer en mi pagina web un espacio donde las personas que visiten mi pagina puedan dejar un sencillo comentario como este que estoy dejando en este momento osea un campo para nombre correo el campo del comentario y el boton de enviar, si alguien me puediera explicar se los agradecere, llevo much0o tiempo buscando como hacerlo, si me pueden ayudar mi correo es alucard040@hotmail.com
gracias
juan pablo giraldo
mírate este artículo que te lo explican muy bien
http://articulos.nolimites.net/formularios/creacion-de-un-sistema-de-comentarios-t1065.0.html
saludos
Tengo una duda:
Lo he intentado pero no lo he conseguido.
¿ Cómo hago para que una vez seleccionados los 3 combos correctamente, si vuelves a seleccionar algo distinto en el primero no me deje el 3 lleno ?
Gracias
@endepleis : creo que lo hace no? en el ejemplo .. o explicame un poco mas por favor..
Tengo una duda
en base al codigo q desarrollaste, al mandar una busqueda, la hace sobre id (idestado , idciudad), y asi muestra los resultados, como le puedo hacer para que en lugar de q los resultados sean las id’s, sea la ciudad.. no se si me explique??
gracias
hola, al ver tu codigo me surgio… ¿dónde está? Gracias por tu aportacion, estoy loco buscando algo asi.
vaya no salio lo que puse
jquery.js
Hola:
Me intereso mucho tu post, pero a la hora de bajar los ejemplos no me funcionan y me lanzan error, soy nuevo en esto de PHP Y JAVASCRIPT, por lo que solkcito de su ayuda.
Gracias.
Les dejo mi correo por si alguien me puede ayudar
jefsaga@gmail.com
@Jesus Salas; Agregame a tu msn o gtalk.. con la cuenta juanj.esparza@gmail.com, con gusto te hecho la mano en medida de lo posible
Hola, como le puedo hacer para inicializar los combos con un valor predeterminado (Ej. Pais: Mexico, Estado: Yucatan, Ciudad: Merida)… saludos