Combos dependientes AJAX base de datos

Categories: AJAX, PHP - Tags: , ,

Anteriormente 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

25 Responses to Combos dependientes AJAX base de datos

  1. fran says:

    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 \

  2. fran says:

    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

  3. admin says:

    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á)

  4. fran says:

    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!

  5. admin says:

    Eso significa que en tu servidor no esta activa short open tag, simplemente en el archivo de configuracion cambia <? por <?php

  6. fran says:

    gracias!!! hice lo que me indicastes de cambiar a <?php y todo ok! muchas gracias! lo adaptare a mi proyecto y luego te cuento.

  7. carlos says:

    Esta muy bueno y interesante el codigo, justo lo que esta buscando es que tengo un proyecto algo parecido.

  8. jose says:

    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.

  9. Selects dependientes | J053D says:

    [...] 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 [...]

  10. juani says:

    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!

  11. Mario says:

    Amigo gracias por compartir tu experiencia con nosotros la verdad me fue muy útil en un proyecto personal que tengo muchas felicidades y bendiciones.

  12. andres figueroa says:

    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

  13. admin says:

    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

  14. jose antonio says:

    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

  15. jmacc says:

    Bueno el codigo pero ya no funcionan los combox con los navegadores, o sera por al version del jquery o el php…

  16. DAVID says:

    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

  17. DAVID says:

    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

  18. Carolina says:

    Muchas gracias, me ha sido de mucha ayuda.

  19. Jose says:

    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

  20. Selects dependientes (Listas Enlazadas) « Jose Diaz Blog says:

    [...] 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 [...]

  21. Luis Ramos says:

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

  22. Briss says:

    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 Ñ

  23. Briss says:

    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 :(

  24. admin says:

    Reemplazala por su equivalente en carcateres especiales ñ o verifica la codificación

  25. Aldo says:

    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 :D

Leave a Reply

Your email address will not be published. Required fields are marked *

*


5 * four =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>