Combobox dependientes de Pais, Estado y Ciudad con PHP, MySQL, jQuery y un poco de AJAX
Mi aporte de hoy es un ejemplo muy artesanal de como hacer Combobox dependientes ó Selects dependientes de País, Estado y Ciudad con PHP, MySQL, jQuery y un poco de AJAX.
De entrada es necesario tener un par de querys para generar las tablas necesarias y los datos que contendran esas tablas, estos me los encontre en un hilo de foros del web, uno y otro.
Scripts en PHP para la conexion a la base de datos y el manejo de los datos extraidos, jQuery para el AJAX y el manejo del DOM en nuestro documento.
Mientras buscaba una solución rápida y práctica encontré algunos ejemplos pero me parecieron sucios y difícil de entenderlos a la primera, mi esfuerzo tiene la intención de buscar la manera más simple y clara de hacerlo.
- Demo: http://www.drbizarre.net/tester/selects/
- Archivos: Descargar
Comentarios
Ever [23-jun-2009]
hey q onda bro.. estuve revisando tu gran aportaso y realmente es sencillisimo pero tengo un problema a la hora de implementarlo lo que pasa es que kiero saber en el archivo class.mysql.php a la hora de conectarlo a la base de datos, el nombre de tu base de datos es location kiero imaginarme entonces lo q yo hago es cambiar el nombre por el de mi base de datos pero en el combo me sale un mensaje que dice Unknown database'location' quisiera donde esta mi error...Lo que pasa es q lo kiero implementar para un trabajillo pero yo empieso desde estado, jurisdiccion, municipio y localidad no se si podrias auxiliarme por favor mi bro... Muchas gracias!!!! buen aporte es muy facil de entender...Dr. Bizarre [26-jun-2009]
Ever que onda, Lo ms probable es que la conexin a la bdd est fallando. Si an no encuentras solucin, hazmelo saber.Por IM me encuentras en dr.bizarre@hotmail.com, drbizarre@gmail.com, sino enviame a oscar@drbizarre.net tus dudas.Saludos.Ever [30-jun-2009]
Ok.. ya te agregue en mi msn para estar mas en contacto ojala puedas aceptarme y poder resover mis duditas... creo q ya resolvi unos detalles ya me funcinan los dos primeros combos pero el tercero no... me podrias hechar la mano por favor te lo agradeceri muchisimo... mi correo es ever_foxy@hotmail.com... de ante mano muchas gracias!!!! :)Dr. Bizarre [01-jul-2009]
Listo Ever, ya te agregue. Te veo en linea.Ever [01-jul-2009]
que onda oye me podrias decir en q horario te podria encontrar para resolver las dudas por favor.... Gracias!!!Pepe [14-jul-2009]
Excelente, muy etendible, ya de hecho depur el mio pero tiene un gran problema el script, selecciona digamos "Mexico", luego "Distrito Federal" y sorpresa, carga todas las provincias del mundo (venezuela, argentina, mxico, etc.) relacionadas con la tabla. Estoy buscando la forma en que se relacione de mejor forma la tabla pero no lo he conseguido pues las consultas corren dentro de funciones.Skandelabro [15-jul-2009]
hola saludos ...esta muy bueno el ejemplo..pero igual tengo ataos...me gustaria saber si solucionaron lo que comenta el socio del post de arriba...bueno saludos nos vemos y wajajajajaja espero respondan adios :)Dr. Bizarre [26-jul-2009]
#Pepe: Gracias carnal, rienes razon no me habia fijado en esa error. Se que es un problema de la tabla, vamos viendo como reparamos eso.#Skandelabro:Gracias hermano, vamos a solucionarlo.Gilberto [27-jul-2009]
Yeah. You example is great. Could you send to me your database's script, I think is great your db.Dr. Bizarre [28-jul-2009]
#Gilberto:http://www.dbis.informatik.uni-goettingen.de/Mondial/mondial-inputs-mysql.sql
http://www.dbis.informatik.uni-goettingen.de/Mondial/mondial-schema-mysql.sql
Ever [03-ago-2009]
Que onda man como estas.. espero que te acuerdes de mi soy de nayarit oye cuando estaras conectado para preguntarte sobre unos detalles....espero puedas auxiliarme.. gracias!!!!!Ever [07-ago-2009]
Que onda man la duda por la que te he estado buscando es por que a la hora de guardar el valor de los selects en la base de datos los guarda con el id o clave no se si podrias a ayudarme a que en ves de almacenar eso me almacenara el nombre o la descripcion... GRACIAS!!!!!Ever [11-ago-2009]
Alguien que me pueda ayudar porfavor oscar parece q anda de vacaciones... jejejej de verdad solo kiero resolver unos problemillas sobre estos selects soy nuevo en esto y la neta q necesito q me ayuden de verdad se los agradecere....Dr. Bizarre [11-ago-2009]
Ever que onda wey, una disculpa hermano pero mi dekstop andaba fallando culpa de un disipador de chipset chafon.Pero aqui ando.
En relacion a tu problema, la solucion esta en javascript, en la funcion donde envias el parametro, en lugar de enviar el 'value', envias el 'text' del option.
Aqui puedes encontrar mas ayuda para eso.
http://www.mredkj.com/tutorials/tutorial002.html Ojala logres resolver, sino aqui andamos, saludos.
Ever [12-ago-2009]
Que onda carnal.. no hay problema pero q bueno que te pudiste comunicar.. gracias voy a checar eso a ver si puedo ya casi no te conectas man a ver si te veo conectado por ahi sale nos vemos y aludos a la pekeña...Ever [13-ago-2009]
Que onda man pues aki con la novedad de q no he podido soulucionar este detalle q te comente no se si podrias auxiliarme mas ya ves q casi no conosco muy bien esto hasta ahorita de verdad te lo agradeceria... GRACIAS!!!Jg [08-sep-2009]
hola, estoy necesitando bastante esta aplicacion, pero en el link de descarga parece que esta roto, sera que me podrias pasar los archivo de conexion y el resto que falta...graciasDr. Bizarre [08-sep-2009]
Jg, una disculpa por le link roto, hoy por la noche reparo eso. Gracias por el aviso.Espero te sirva, cualquier duda aqui estamos.
Jg [09-sep-2009]
hola Dr. Bizarregracias por reparar el link, me fue de mucha ayuda.
estoy desarrolando una aplicacion con varios modulos, y uno de esos me tiene algo preocupado, ya que necesito implementar un foro en php a mi aplicacion pero no tengo idea de como hacerlo.
( tendria que ser sin login ya que mi aplicacion ya tiene un login )
si me pudieras ayudar te lo agradeceria en grande
cordialmente
jg
Dr. Bizarre [09-sep-2009]
Jg, que bien que te sirvio.En relacion a lo de tu aplicacion y la implentacion que quieres
hacer de un foro, segun mi experiencia habra que analizar si la implementacion
es lo mas conveniente, la forma de autentificacion
de uno u otro puede variar y ahi es donde viene la decisión.
Realmente la operación de un foro no es complicada, si ya tienes definidos usuarios y niveles
en tu aplicacion, facilmente podras integrar de manera independiente
la funcionalidad de foro.
Categorias, preguntas y respuestas son la estructura basica de un foro, los detalles vienen despues, como moderacion y creacion de grupos de usuarios etc.
Espero haber clarificado tu idea.
Saludos, ya te agregue en IM.
Mbyte.tk [04-nov-2009]
ayuda tengo un ejemplo de combo dependiente pero se relacionan mediante el id, al momento que mando el formulario para que se guarde en la base de datos guarda los numeros con los que se realcionan no con los datos que muestra el combo....Mbyte.tk [04-nov-2009]
function conexion(){
if (!($link=mysql_connect("localhost","admin","admin"))){
die("Error conectando a la base de datos.");
}
if (!$link=mysql_select_db("ciudad",$link)){
die("Error seleccionando la base de datos.");
}
return($link);
}
$conection = conexion();
$idcombo = $_POST["id"];
$opcionSeleccionada=$_GET["estado"];
$action =$_POST["combo"];
switch($action){
case "edo":{
$res = mysql_query("SELECT idestado,estado FROM estado WHERE pais = $idcombo order by estado ASC");
while($rs = mysql_fetch_array($res))
echo '';
break;
}
case "mun":{
$res = mysql_query("SELECT idciudad,ciudad FROM ciudad WHERE estado= $idcombo order by ciudad ASC");
while($rs = mysql_fetch_array($res))
echo '';
break;
}
}
?>
este es mi codigo mmm me imagino que se podria con una variable session lo malo que como soy aprendis de php nose como hacerlo... espero su ayuda gracias
Dr. Bizarre [04-nov-2009]
Mbyte.tk,La propiedad 'value' del elemento 'option', es la que contiene el valor que pasas a los demas combos para que muestren los resultados en funcion a la relacion que tengas en tus tablas.
Sino mal entiendo tu problema, estas imprimiendo en el 'value' un valor que no requieres para tu query, te recomiendo revises la parte donde imprimes los 'select'.
Creo que no estas usando mi ejemplo, te invito que lo pruebes.
Hpkrawzm [18-nov-2009]
Me ayudo muchísimo tu aporte, además super claro, gracias!!!!Rigo [08-dic-2009]
hola amigos se ve interesante, intente bajar el archivo pero al parecer en el no viene la base de datos que se utiliza, no se si alguien me la podria proporcionar y ver mas detalladamente como funcionasaludos a todos y de ante mano muchisimas gracas por la portacion
excelente trabajo
Dr. Bizarre [09-dic-2009]
@Rigo,Aqui te paso ligas hacia los querys que necesitas para crear la base de datos, tablas y sus registros.
http://www.dbis.informatik.uni-goettingen.de/Mondial/mondial-schema-mysql.sql
http://www.dbis.informatik.uni-goettingen.de/Mondial/mondial-inputs-mysql.sql
Cualquier duda, aqui andamos.
Cosacu [10-dic-2009]
Hola buenas,estoy peleándome con tu código para implementarlo en una web, ya que con otro que tenía me ralentizaba mucho la búsqueda.
Mi intención es que al hacer submit de un form, se mantengan los datos seleccionados en el combo y que no vuelva a valor = 0.
El tema es que necesitaria que según un valor dado por una variable de sesion, el combo se mantuviera "selected". El problema es que no me acepta la variable de sesión. Es como si no exisitiera esa sesión. No sé mucho de js, pero no entiendo como es que no me deja usar el valor de la sesion en el código de cargar-estados.php
foreach (......){
if($_SESSION['provincias'] == $key){
$selected = " selected='selected'";
}
echo "";
}
A ver si me das alguna pista...
Gracias!
Dr. Bizarre [10-dic-2009]
@Cosacu,"Es como si no exisitiera esa sesión. "
Probablemente no exista la sesion en cargar-estados.php
Verifica si existe la variable de la siguiente forma:
isset($_SESSION['provincias'])
Si existe, deberia hacer la comparacion, sino
session_start();
Muy probablemente te falte inicializar sesion con esa funcion.
Estamos al tanto.
Cosacu [11-dic-2009]
Gracias por tu ayuda!Efectivamente me faltaba el session_start();
¡Qué despiste! Tendré que descansar un poco...
Una última consulta, si no te importa.
En estados sí que puedo hacer un "selected" según su valor después de un refresh, pero no puedo con los que dependen de estados, en mi caso municipios, ya que hasta que estados no hace un "onChange" no se carga la información de municipios.
¿Tienes alguna idea de cómo poder hacer esto?
Mi intención es que al hacer submit la página se recarga (lo utilizo para un búsqueda de registros), y me gustaria no tener que seleccionar cada dos por tres estado y municipio. Me gustaria que ya estuviesen seleccionados.
Perdona por mi atrevimiento en preguntar.
Muchas gracias de antemano!
Un saludo.
Dr. Bizarre [11-dic-2009]
@Cosacu,Se me ocurren muchas formas de resolver pero te platico la que tengo mas en mente.
1. Crear una variable tipo array y asignarla a una variable de sesion.
$_SESSION['ubicacion'] = array('pais'=>0,'estado'=>0,'ciudad'=>0);
2. Al cargar la pagina donde tienes los combos, verificar la existencia de $_SESSION['ubicacion'] y su contenido
$ubicacion = $_SESSION['ubicacion'];
$ubicacion["pais"]
$ubicacion["estado"]
$ubicacion["ciudad"]
3. Si existe y si es diferente que cero entonces imprimes una funcion javascript para que cargue los datos en determinado combo segun la variable que le pases
cargar_paises(23);
cargar_estados(12);
cargar_ciudades(32);
A ver que opinas de mi idea, cualquier cosa aqui ando.
Eduardo [25-dic-2009]
Hola muy buen tutorial, aplicando jquery, php y mysql, una duda que tengo y que estoy pasando, imaginemos que estos datos son grabados en bbdd, el de escoger, pais, estado y cuidad en una tabla y quedan guardados y si quiero editar esta selección (imaginamos que escoges pais españa estado madrid y ciudad madrid) y le damos a un botón de guardar y luego queremos editar esta selección como llenamos los datos para que vuelvan a quedar los combos como antes (españa, madrid, madrid)Espero se entienda, saludos...
Dr. Bizarre [27-dic-2009]
@Eduardo, revisa la situacion de @Cosacu, no es una solucion especifica pero quizas aclara un poco tu vision.Ale [05-ene-2010]
Hola! Muy bueno el codigo lo estoy probando en un sitio y estoy comparando los pasises con una base de datos logor comparar el primero para que me quede seleccionado (selected) pero no me pasas las variables me interesa este punto3. Si existe y si es diferente que cero entonces imprimes una funcion javascript para que cargue los datos en determinado combo segun la variable que le pases
cargar_paises(23);
cargar_estados(12);
cargar_ciudades(32);
A ver que opinas de mi idea, cualquier cosa aqui ando.
como sería la funcion javascript paraque cargue los valores que le paso
muchas gracias y saludos
Tinchos [10-ene-2010]
Hola, primero te felicito por el codigo, muy bueno y gracias por compartirlo.Te pido ayuda, ya que me da un error en el tercer combo, al cargar las ciudades, el error es:
Warning invalid argument supplied foreach() in dependencias-ciudades.php linea 7
Parece que no me ejecuta la ultima consulta, probe con ponerle un valor en vez de this->code y funciona...
Gracias desde ya....
Dr. Bizarre [10-ene-2010]
@Tinchos: Que bien que te ayudo el script Martin, saludos hasta Misiones Argentina.Dr. Bizarre [10-ene-2010]
@Ale, estoy por actualizar el script, paciencia por favor.Leo [13-ene-2010]
Hola Dr. como esta? mi problema es el siguiente. Estoy tratando de implementar el codigo suyo y tengo dificultad, en que me aparezcan las ciudades, los paises y las provincias aparecen, pero no las ciudades, me da el siguiente error. "invalid argument supplied for foreach. en dependencias-ciudades.php line 7"Mi idea de porque el error es poque ud usa code
y mis tablas de la bd son las siguientes:
pais:id_pais, pais.
provincia:id_provincia, id_pais, provincia.
ciudad: cod_postal, ciudad, id_provincia.
SI me dice que puedo cambiar para que funcionen los combos anidados se lo agradecere!!!
saludos! leo.
Dr. Bizarre [13-ene-2010]
Leo, revisa lo que estas desplegando en la propiedad 'value' de los options, si tus tablas usan una llave primaria integer como debe ser, entonces que el valor de estas llaves primarias sean las que se desplieguen.Cualquier cosa aqui andamos.
Leo [14-ene-2010]
Hola, yo nuevamente...no entiendo lo que deberia cambiar. Creo que el error es porque lo que devuelve dependencia-estados son losnombres de los estados y no los id_estados, por lo que despues no puedo usar id_estados para relacionarlo con la tabla ciudades que tambien tiene id_estados.igualmente no se como cambiar lo que me decis, asi que si me lo podrias decir mas especificamente o mostrarme lo que tengo q cambiar y porque valor cambairlo.
mis tablas en la bd son:
pais:id_pais, pais.
provincia:id_provincia, id_pais, provincia.
ciudad: cod_postal, ciudad, id_provincia.
gracias nuevamente!
saludos, leo.
Francisco [15-ene-2010]
Muchas gracias por el post Dr. Bizarre, me fue de gran ayuda!Lo agregué a una página, modifique las consultas y logré hacer una doble inyección (primero inyecté una tabla de datos, después los valores) usando jquery.
Un abrazo!
RAUL [16-ene-2010]
ESTE EJEMPLO ES MUY BUENOS,PERO HACE TIEMPOS DEJE DE USAR MYSQL POR EXIGENCIAS DE MI TRABAJO MIGRE A SQL,
SI EL EJEMPLO ESTARIA CON SQL ESTARÍA ESTUPENDO.
TOY TRATANDO DE ADAPTARLO A SQL.
Jartad [21-ene-2010]
@RAUL Mysql es un sistema de gestión de base de datos y SQL es el lenguaje que se usa para hacer consulta a base de datos relacionales. Así que toma su tiempo para preguntar :)Dr. Bizarre [21-ene-2010]
@Jartad, @Raul seguro quizo decir MSSQL, pero comodamente lo llama SQL.Cierto @Raul?
Espero compartas el script con acceso a MSSQL
Jhimmy [13-feb-2010]
hola exelente turorial lo estoy implementandoClaudio [20-feb-2010]
Hola como esta parece estar muy bueno este script en php pero como lo impemento. muchas gracias.. soy prencipiante en php pero me defiendo nada mas. SaludoDr. Bizarre [20-feb-2010]
@Claudio, hermano descarga los archivos ejemplo y juega con ellos, a ver que sale. Minimo un poco de entendimiento de javascript y como dices que te defiendes en php seguro entenderas el codigo.Saludos y quedo pendiente.
Heisler [28-feb-2010]
Ok veo muchos comentarios pero no leo un sencillo errorselecciona cualquier pais
luego vuelve a seleccionar
la opcion seleciona uno... del mismo combo pais
se produce un error
en el combo estado aparece:
warning invalid argument
Prueben y alguien me ayude a solucionar por fa.
en el mismo ejemplo de esta pagina se produce el error.
Dr. Bizarre [28-feb-2010]
@Heisler, gracias por el dato, no estaba validado cuando curiosamente seleccionabas la opcion de 'seleciona'.Agregar esta validacion asi:
$("#pais").change(function(){if(this.value!=0){dependencia_estado();}});
$("#estado").change(function(){if(this.value!=0){dependencia_ciudad();}});
Heisler [04-mar-2010]
gracias @BizarreEstoy en pañales con jquery
si hubiera leido un poco mas...
Excelente de nuevo gracias por el script