Combos dependientes AJAX base de datos
Categories: AJAX, PHP - Tags: AJAX, combos, jqueryAnteriormente publiqué un post para crear combos dependientes usando jquery, el cual podía modificarse para ser usado con una base de datos, ahora voy a publicar esa modificación. Puedes ver el post original aqui
En el caso anterior se usaban dos archivos para mostrar el nuevo contenido del combo que serían combo1.php y combo2.php
1 2 3 4 5 6 | $rpta= ' <option value="op2_1">Option1</option> <option value="op2_2">Option2</option> <option value="op2_3">Option3</option> '; echo $rpta; |
¿Cómo me conecto a la base de datos?
Lo primero es conectarnos a la base de datos y buscar el elemento seleccionado en el combo y según eso llenar el otro combo por una cuestión de comodidad voy a usar una clase que se encargue de dicha conexion, puedes descargarla y ver como funciona aqui
¿Cómo busco los datos?
Para eso hay que usar una consulta sql como esta:
“SELECT * FROM ciudad WHERE pais_id LIKE ‘$_POST[elegido]‘”
La consulta obviamente varia de acuerdo a nuestra base de datos, para este ejemplo estoy usando una base de datos con las tablas continente, pais y ciudad
combo1.php y combo2.php
El script para ambos similar, lo único que varía es la consulta sql
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php // Incluimos la configuración de la conexión de base de datos include("includes/config.inc.php"); include("includes/mysql.class.php"); // Creamos la conexión $db = new MySQL(); // Abrimos la conexión $db->open(); // Ejecutamos la consulta sql $consulta = $db->consulta("SELECT * FROM pais WHERE continente_id LIKE '$_POST[elegido]'"); // Creamos un array para mostrar los datos del combo if ($row = $db->fetch_array($consulta)) { do { echo '<option value="'.$row['pais_id'].'">'.$row['pais_name'].'</option>'; }while($row = $db->fetch_array($consulta)); } ?> |
Puedes bajar todo el código desde aquí
No olvides que para usar ese ejemplo debes subir primero la base de datos (migueltest.sql) y además debes modificar el archivo includes/config.inc.php con la información de tu servidor de base de datos

Estimado Miguel,
Aunque no he ojeado toda la pagina, de verdad que esta super, gracias, felicitaciones y exito!.
Ahora bien, me he bajado tu codigo y no me esta cargando en el 1er combo nada de la base de datos, solo obtengo \
Disculpa, :S continuo en este..
.. solo obtengo en el combo 1 “elige uno”. Tu codigo me parece el mas adaptable y entendible de todos los que he leido en internet. Espero puedas ayudarme, desde ya muchas gracias. Saludos, Francisco
Si solo obtienes eso significa que tu base de datos esta en blanco o que no haz configurado adecuadamente la conexion de base de datos, verifica primero eso, si hay algun error en la consola de firebug debe aparecer. Imagino ademas que lo estas probando desde http://localhost/mifolder o un servidor web (de otra forma PHP no se ejecutará)
Gracias!!! te comento que coloque directamente en el archivo -mysql.class.php- los datos de host, usuario, contraseña y nombre de la base de datos y todo funciono ok!. el firebug me da un mensaje de -Unknown MySQL server host \’_host\’- creo sabras q puede estar sucediendo ? gracias nuevamente!
Eso significa que en tu servidor no esta activa short open tag, simplemente en el archivo de configuracion cambia <? por <?php
gracias!!! hice lo que me indicastes de cambiar a <?php y todo ok! muchas gracias! lo adaptare a mi proyecto y luego te cuento.
Esta muy bueno y interesante el codigo, justo lo que esta buscando es que tengo un proyecto algo parecido.
Muchas gracias, este ejemplo es uno de los mejores que he visto, corto, entedible y muy funcional, jquery lo mejor para realizar esto. Excelente material, gracias.
[...] las mejores practicas que con las que me he tropesado sobre listas/combos/selects dependientes que ofrece Miguel Manchego en su blog, en vista de que solo puedo velar y garantizar por mi propio espacio (este sitio), acostumbro [...]
amigo, te tengo que agradecer mucho! estuve tres dias luchando con este tema…sin duda tu articulo es el que mejor encontre en la red, y el codigo el mas adaptable…te felicito, segui asi!
Amigo gracias por compartir tu experiencia con nosotros la verdad me fue muy útil en un proyecto personal que tengo muchas felicidades y bendiciones.
Respetado señor: quisiera saber como hago, para que despeues de haber seleccionado el pais y la ciudad de las listas me aparezcan en otro formulario despeues de enviar la informacion.
De antemano muchas gracias por su colaboracion.
Att.
Andres Figueroa.
Colombia
Imaginemos que las listas se llaman pais1, pais2. En el otro formulario se mostraria <option value="” selected=”selected”> y claro además del resto de paises que se jalarian de la base de datos
Buenos días.
A mi me hace bien los dos primero pero cuando llego al ultimo me sale en blanco, y no es ni de la conexion ni porque el campo este en blanco. Alguien puede ayudarme. Gracias
Bueno el codigo pero ya no funcionan los combox con los navegadores, o sera por al version del jquery o el php…
BUEN DIA… APENAS ESTOY INCURSIONANDO EN ESTE MUNDO Y ME HE DADO CUENTA QUE TUS MANUALES SON MUY BUENOS TE FELICITO.
QUISIERA SABER COMO HAGO PARA LLENAR UNA TABLA HTML, CON UNA CONSULTA DE BD SEGUN LO QUE SE ESCOJA EN UN COMBO… COMO EN ESTE TUTORIAL PERO EN VEZ DEL 2 COMBO, UNA TABLA
BUEN DIA… APENAS ESTOY INCURSIONANDO EN ESTE MUNDO Y ME HE DADO CUENTA QUE TUS MANUALES SON MUY BUENOS TE FELICITO.
QUISIERA SABER COMO HAGO PARA LLENAR UNA TABLA HTML, CON UNA CONSULTA DE BD SEGUN LO QUE SE ESCOJA EN UN COMBO… COMO EN ESTE TUTORIAL PERO EN VEZ DEL 2DO COMBO, UNA TABLA
Muchas gracias, me ha sido de mucha ayuda.
Gracias mil, pude implementarlo en mi proyecto sin novedad.
Si necesito otros combos adicionales, q jalen info de otras tablas, q debo modificar??? Gracias y saludos
[...] las mejores practicas que con las que me he tropesado sobre listas/combos/selects dependientes que ofrece Miguel Manchego en su blog, en vista de que solo puedo velar y garantizar por mi propio espacio (este sitio), acostumbro [...]
Muchas Gracias por compartir tus conocimientos, me gusta la manera como explica los proyectos presentados, pero quisiera saber como hacer para aumentar el combo a mas niveles, ejemplo seria país, estado, municipalidad, ciudad, zonas, residencias, calles.. y todo con la conexión a una base de datos muchas gracias..
Hola gracias por tu ejemplo esta muy facil de entender, solo una pregunta que puedo hacer para que mis en mi combo se lea la letra Ñ
Hola tengo una pregunta¿como puedo hacer q funcione se selecciona una opcion q contenga la letra Ñ… funciona con todo , pero si se escoge un opcione q tenga la letra ñ el combo 2 no despliega nada
Reemplazala por su equivalente en carcateres especiales ñ o verifica la codificación
Bueno, modifique tu ejemplo para usarlo con una base de datos mia y funciona muy bien en Chrome, firefox… pero en internet explorer no me funciona… como puedo solucionarlo? es internet explorer no compatible con jquery? bueno un saludo y espeor me respondas