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 :

PLAIN TEXT
PHP:
  1. function conectar()
  2. {
  3. mysql_connect("tunombreservidor", "usuario", "contraseña");
  5. }
  6.  
  7. function desconectar()
  8. {
  10. }
  11. ?>

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

PLAIN TEXT
PHP:
  1. mysql_connect("localhost", "root", "");

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

Compártelo

Posts Relacionados