Hola de nuevo a todos, en esta oportunidad vamos a mostrar un ejemplo simple de los conocidos Cascade Dropdown, estos funcionan de tal manera que al momento de hacer una eleccion de una lista desplegable principal, en la siguiente lista desplegable se actualizan los valores seleccionables que dependen de la principal. Para entender mejor esto consideremos el siguiente ejemplo.
Tenemos amigos de distintas ciudades, si quisieramos filtrar amigos por ciudad el resultado esperado si selecciono la ciudad de Neiva sería este:
Éste es un claro ejemplo de los Cascade Dropdown, en una página web fácilmente pueden haber tres o más, depende del requerimiento, lo que queremos buscar es que esta experiencia sea fácil y no requiera hacer Postback, sino que sea dinámico, para ello hice un proyecto con la siguiente estructura (un poco conocida ya):
No voy a mostrar el contenido de cada uno de estos archivos, pero si voy a comentar acerca de los más importantes aquí (o al menos los que juegan el papel que nos interesa).
En index.html encontrarán dos listas desplegables para seleccionar una ciudad y un amigo respectivamente, según como hemos venido comentando al seleccionar una ciudad, en la lista desplegable de amigos se deben actualziar a los que pertenecen a la misma.
En mi_js.js se encuentra la lógica que me permite hacer las peticiones asíncronas para poder cambiar las opciones de la lista desplegable de amigos según la ciudad deseada.
En funciones.php se encuentran los métodos de consulta de información en la base de datos, que serán consumidos por los controladores.
El controlador obtener_amigos_de_ciudad.php es el encargado de utilizar el método de consulta de amigos en la ciudad que se requiere.
Esta es la aplicación en tiempo de ejecución:
Por último y no menos importante éste proyecto lo pueden consultar en mi repositorio de GitHub .
Si tienes dudas o sugerencias escríbelas en los comentarios o mándame un MP, estamos para mejorar.
