Selects dependientes (combos dependientes) con AJAX - ejemplo práctico

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :)

Importante

El script de esta página NO utiliza XML para comunicar servidor-cliente y cargar los valores (utiliza innerHTML). Si deseas descargarte un script que genere automáticamente el código necesario para hacer funcionar select dependientes multinivel, con comunicación XML, que utilice JavaScript no intrusivo y sea muy sencillo de usar, visita este script.

Instrucciones

Hacer click en la primera lista desplegable, seleccionar cualquier opción de las dispuestas. El segundo select será habilitado en el momento que se haya seleccionado una opción válida del primer select y mostrará las opciones disponibles que se correspondan con dicha elección, por supuesto sin realizar recarga de la página.
El código fuente esta compuesto por dos archivos ".php" con sus estilos y funciones JavaScript en archivos externos más los SQL necesarios para el armado de las tablas. El listado de países y estados se incluye también con el ejemplo.

Funcionamiento

El primer select es generado mediante una función escrita en lenguaje de servidor (en este caso PHP) la cuál se encarga de consultar nuestra base de datos e imprimir todos los registros de un campo de determinada tabla. Cuando el valor de este primer select es modificado, el evento onChange de JavaScript se dispara llamando a una función. Esta función se encargará de determinar cuál select ha sido el modificado y el valor que el usuario ha seleccionado en el mismo. Si el usuario ha seleccionado la opción "Elige", los select posteriores en la cadena de actualización cambiarán su estado a "Selecciona opción...". Por el contrario, si la opción elegida no es "Elige", se abrirá una conexión asincrónica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado. El servidor validará lo que recibe para luego buscar en su base de datos el listado de opciones que correspondan a lo elegido por el usuario (los cuales se relacionan en las tablas mediante un campo en común) y devolverá los datos en formato HTML. Solo resta que el cliente ubique esta información en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualización, tarea que se hará mediante innerHTML.

Para obtener los códigos clickeá aquí.

Actualización

Los últimos cambios realizados son:

  • Re-estructuración del código fuente para hacerlo reutilizable para "X" cantidad de combos dependientes.
  • Añadido de comentarios nuevos para ayudar a la comprensión del sistema.
  • Código más claro y limpio, ideal para su estudio.
Consultas, comentarios, sugerencias vía Twitter a @edanps