Pedir presupuesto

Tutorial – Creación de combos anidados con base de datos MySql

En muchos formularios que circulan por la red tienen combox anidados.

¿Y que es un combo anidado?

Pues este tipo de combos son listas que van desplegándose una después de otra según lo que seleccionemos en la lista anterior. Un ejemplo claro lo tenemos a la hora de registrarnos en alguna web en la que nos piden nuestra población. Normalmente se hace con combos anidados, primero seleccionas el país, una vez seleccionado el país, nos aparecerá otro combo con la lista de provincias de nuestro país, y una vez seleccionamos la provincia nos aparecerá la población. Está de más decir que si elegimos España nos saldrán sólo las provincias del país y si elegimos Madrid, sólo las poblaciones de la comunidad de Madrid. Y todo esto sin tener que volver a cargar la página gracias a AJAX.

 

Supongo que habreis entendido ya que es un combo anidado.

Ahora os explicaré como podemos crearlos:

Creación de la base de datos

En este apartado os explicaré de que consta la base de datos y sus tablas, pero podeis descargar el archivo .sql aquí para despues cargarlo en vuestra base de datos tal y como se ve en la imagen.

  1. Lo primero que haremos es crear la base de datos, a la que llamaremos «AJAX» y que estará compuesta por 3 tablas:
    • select_1: Correspondiente al primer combo
    • select_2: Correspondiente al segundo combo
    • select_3: Correspondiente al tercer combo
  2. Cada una de estas tablas contendrán los siguientes registros:
    • Select_1: Crearemos dos campos, una clave unica que llamaremos «id» y un campo llamado opcion que será el nombre que aparecerá en el primer combo, con los siguientes registros (podemos crear tantas opciones como queramos). La tabla debería quedar con los siguientes registros:

    • Select_2: Crearemos tres campos, una clave unica que llamaremos «id», un campo llamado opcion que será el nombre que aparecerá en el segundo combo y un tercer campo que nos servirá para relacionar el primer combo con este segundo llamado «relacion», la tabla quedaría de la siguiente manera:

    • Select_3: Seguiremos la misma estructura de la tabla select_2, poniendo los mismos campos, y relacionando los registros con los de la tabla select_2 gracias al campo relacion, como podeis ver en la siguiente imagen:

Creación de la conexión con la base de datos

Para poder conectar la base de datos con nuestra página web, tendremos que crearnos un archivo .PHP llamado :

[php]
function conectar()
{
mysql_connect(«tunombreservidor», «usuario», «contraseña»);
mysql_select_db(«ajax»);
}

function desconectar()
{
mysql_close();
}
?>
[/php]

Donde tendremos que cambiar «tunombreservidor», «usuario», «contraseña» por nuestros datos de acceso a la MySQl. En mi caso, para hacer las pruebas en localhost lo tengo así:

[php]mysql_connect(«localhost», «root», «»);[/php]

Una vez realizado todo el proceso de creación de la base de datos y sus tablas, y saber como conectarlas, con el resto de archivos PHP para validar y procesar los combos (explicados con comentarios dentro de los archivos) ya tenemos montado nuestros combos anidados.

Descarga de los archivos:

Vía: FormatoWeb

Nota Importante: Estos archivos estan bajo licencia Creative Commons, asi que si quieres usar los códigos tendrás que tener una reseña a la web del autor, tal y como se explica dentro del ZIP, en el archivo «Licencia – LEER.txt».

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

17 comentarios

  1. Hola

    Soy nuevo en esto de la programación, me pareció muy bueno el código, pero traté de implementarlo con la base de datos del Servicio Postal Mexicano (sepomex) queriendo sacar Estado, luego Municipio y Colonia, pero me atoré ya que me repite el municipio al cargarlo y para el select de la colonia me toma el municipio de nuevo. ¿Podrían ayudarme a resolver este problemita?. la bd la descargué desde el sitio de sepomex. Gracias.

  2. Yo aplique el codigo y funciona perfecto pero a la hora que caen los registros a la base de datos no me cae el nombre del estado si no que me cae el numero al igual con las provincias o municipios de los estados. alguian podria indicarme como hacerle para que me caiga el texto a la base de datos y no el numero con el que se relacionan las tablas

  3. epales buehhh e provado el codigo cuando lo corro por wamp server el apache de genera un error por donde lo hacen funcionar ustedes agradeceria la respuestas q tenga linda tarde

  4. Muy bueno el ejemplo funciona sin problemas, epro tengo una duda…

    Como paso el valor del ultimo combo seleccionado y lo paso a php???

    Muchas gracias

  5. Buenos dias.
    Si alguien puede ayudarme con esto les agradeceria, el asunto es que implemente este combo anidado pero no he podido lograr que al guardarlo luego a una tabla se me guarden los id de las categorias seleccionadas.
    Creo que no se como hacerlo por eso espero su atuda.
    PD: Mi aplicacion esta diseñada con los codigos de dreamweaver cs3 por si acaso.

    Gracias.

  6. deseo saber despues de que se haya cargado en el formulario.. como hago para que esos registros se gurden en la bd ya que una persona los ha escogido..
    me explico.. una persona entra por su session y desea escoger el combo: area, y si escoge area.. se despliega el combo cargo.. y estos datos guardarlos en la bd ?? Gracias

  7. Lo único que tienes que hacer es asignarle a cada combo un «name» (este atributo lo debes incluir en el input), por ejemplo:

    [html]


    [/html]

    Para registrar estos valores tienes que ayudarte del valor que le has dado en name. Como ves en action he puesto «miCoche.php» pues creas una pagina que se llame así en el mismo directorio de la pagina donde está el formulario, y para recuperar ese valor pondrías esto en «miCoche.php»:

    [php]

    $coche = $_POST[‘cocheForm’];

    echo $coche . «
    «;

    //Aqui las instrucciones para registrarlo en la base de datos

    [/php]

    Para el tema de registrar en base de datos con PHP, te aconsejo sigas este completo tutorial sobre Registro de Usuarios en PHP y Mysql con activación de usuario por mail (que ya te vale para saber como funciona) que publiqué no hace mucho y que tuvo muy buena aceptación.

    http://www.colordeu.es/BLOG/registros-de-usuarios-en-php-y-mysql-con-validacion-de-campos-y-activacion-por-mail-88

    Esta es la ultima parte del tutorial donde están los archivos, pero al comienzo pongo una lista con todas sus partes desde la 1 hasta la 8.

    Espero te haya servido esto ..

    saludos.

  8. Hola revise tu código y si funciona, la cuestion es que cuando quiero pasarlo al codigo que tengo o a la base solo me funciona el primero y el siguiente combo me dice que no existe la tabla select_2 en la base de datos.

    No se si me puedas ayudar mi situación es la siguiente: tengo un combo al momento de seleccionar una opción me llene dos cuadros de texto con informacion de la bd, pero que al igual me manipule el siguiente combo con id que corresponden.

    1. Gloria tiene toda la pinta de que realmente no exista esa tabla en tu base de datos. Vigila que realmente exista select_2 y sobre todo las mayúsculas, tiene que ser el nombre exacto. ya me dirás que tal.

  9. mmmm, Realmente esa tabla no la tengo, como te digo adapte el codigo al codigo que seria para mi, pero no se donde modificar esa opcion de no existe la tabla select_2 en la base de datos.

    La verdad ya lo revise y no se en donde esta esa opcion para esa opcion… Gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es