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 .

Anuncios

Acciones

Information

36 responses

12 08 2008
gabriel

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

12 08 2008
jeb

@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

26 08 2008
NOELIA CAYO

necesito hacer una pagina con dependencia de combos

8 09 2008
raul

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.

13 09 2008
endepleis

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 !!!

19 09 2008
juan pablo giraldo

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

6 10 2008
endepleis

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

6 10 2008
endepleis

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

6 10 2008
jeb

@endepleis : creo que lo hace no? en el ejemplo .. o explicame un poco mas por favor..

10 10 2008
Carlos

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

14 10 2008
javier

hola, al ver tu codigo me surgio… ¿dónde está? Gracias por tu aportacion, estoy loco buscando algo asi.

14 10 2008
javier

vaya no salio lo que puse

14 10 2008
javier

jquery.js

25 11 2008
Jesus Salas

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.

25 11 2008
Jesus Salas

Les dejo mi correo por si alguien me puede ayudar
jefsaga@gmail.com

25 11 2008
jeb

@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

16 12 2008
Miguel

Hola, como le puedo hacer para inicializar los combos con un valor predeterminado (Ej. Pais: Mexico, Estado: Yucatan, Ciudad: Merida)… saludos

23 04 2009
ckras

Hola oye no puedo descargar los archivos, me los podras mandar a mi correo?? mil gracias

12 06 2009
Marcos

Hola, muy buenas, estoy intentando editar tu código, pues yo sólo necesito un combo, no tres. Mi problema, es que has llamado a la TABLA pais y al CAMPO pais también, entonces cada vez que pones pais… no se si te refieres al nombre de la tabla, o al nombre del campo.
como por ejemplo en el case[‘pais’]… y cosas así.

21 06 2009
David

El link no puede efectuar la descarga de los archivos fuentes

8 05 2010
orlando

Demasiado código para hacer algo muy simple. Con Jquey lo puedes hacer con pócas líneas de código y muy facil de entender e implementar para lo que se necesite.

8 05 2010
orlando

No me habia fijado pero este tio usa jquery y se complica demasiado a la hora de programar. Un buen programador es aquel que usa pocas lineas para un determinado proyecto. Si desean que les enseñe de manera fácil de hacer combos dependientes con jquery escríbanme a mi correo solicitando el codigo .. orlandokempes@hotmail.com

24 06 2010
24 06 2010
29 07 2010
alma

hola quise utilizar tu ejemplo para adaptarlo a un ingreso de notas, pero no me funciona x favor me puedes escribir a mi email para ver si me puedes ayudar graciasss es urgente

7 09 2010
Eunice

saludos a mi me da error ese codigo q muestras aqui… no se que sucede

16 02 2011
isra

no sirve en link de las ciudades..

20 03 2011
Gerardo

ahora si quede loco … si vieran la loquera que hice para hacer esto solo con php… e intento fallido… hice dos query uno de marca y otro de modelo y cargue solo el combo marca. despues en onchange en el combo marca use un submit() para obtener el codigo de la marca que es la condicion del query de modelo … todo perfecto pero queria que se quedara seleccionado en el combo de marca la marca que he seleccionado y ahi comenzo mi problema …

como hago submit siembre queda seleccionada la primera marca del query… trate de hacer un tercer query condicionado con el codigo de la marca y coloque el resultado en el $query[‘MARACA’] pero no furulo no hace nada… lo pone en blanco

28 03 2011
Gerardo

con toda mi loquera lo logre… si quieren el codigo me dicen y se los coloco

12 06 2011
sam

hola amigo te escribi a tu correo para hacerte una consulta hacer si me puedes ayudar ademas decir que no se pueden bajar los archivos de ejemplo saludos.

26 06 2011
aa

podrias subir de nuevo el codigo :D?
gracias

8 10 2011
erik

ola kisiera saber komo puedo hacer para que a mi pagina web comenten porfavor ayudenme kiero que puedan comentar como lo k estoy haciendo comentando gracias por su ayuda el que sabe me puede agregar a mi correo the_loqito_23@hotmail.com

9 12 2011
Gabriel

Hola Juan, una pregunta, no puedo descargar los archivos, hay posibilidad de que los subas nuevamente?

Desde ya muchas gracias

Saludos

Gabriel

4 01 2012
Edgar Rodriguez

Buen dia, tu post esta exce,ente, solo que los archivos, no los pude descargar, me pregunto si los puedes actualizar. gracias.

24 08 2012
Anónimo

[…] […]

27 08 2012
guddy

el link esta roto 😦

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: