Selects en cascada con codeigniter y jQuery a 4 niveles

Tutoriales de Codeigniter

Aunque sea una cosa bastante sencilla, recibo bastantes consultas sobre como ampliar la cantidad de desplegables en el tutorial anterior sobre Cargar selects con jQuery y codeigniter, vamos a tratar de dejarlo lo más claro posible en este tutorial, y de paso, a mejorar su código, que no me gusta como está.

Realmente no serán 4 desplegables, ya que no se me ocurre con que llenar tanto desplegable :), utilizaremos provincias, poblaciones y sus respectivos códigos postales, así pues, cuando cargue la página, el primer desplegable contendrá todas las provincias, una vez escojamos una, el select que contiene las poblaciones se llenará con las que pertenecen a esa provincia, y, a la misma vez, el campo de texto que contiene el código postal se llenará con el código postal de esa población, cada vez que cambie la población, el código postal también lo hará y el último select se cargará con todas las provincias sin ningún tipo de filtro.

Lo primero que debes hacer es crear el proyecto e importar la siguiente base de datos a tu gestor de bases de datos.

Descargar bd_selects_ci

Una vez tengas la base de datos montada, debes cargar la librería database y los helpers url y form, serán necesarios para el proyecto.

Ahora que ya tenemos toda la configuración podemos empezar por crear el controlador home y añadir el siguiente código.

Espero que no tengas ninguna duda con el código, es muy simple, pero si la tienes, haz un comentario al final del tutorial :).

Ahora crea el modelo provincias_model y añade el siguiente código, el cuál obtiene toda la información de la base de datos y la devuelve al controlador.

Llegados aquí, sólo nos queda crear la vista home, así que crea este archivo en el directorio views y añade el siguiente código.

Aquí hay cosas nuevas, por lo menos cosas que se han tratado en el blog, por ejemplo, el uso de los dropdowns de codeigniter, su uso es simple, pero necesita que formateemos el array como lo hemos hecho en el método getProvincias del modelo, la clave el value y el valor el texto, sabiendo eso, crearlos es realmente sencillo.

El problema viene cuando esos mismos datos los intentamos aprovechar para llenar el dropdown con jQuery como hacemos con el cambio del select poblaciones, para poder recorrer y llenar el dropdown una buena y sencilla opción es hacer uso de la función $.each de jQuery, que obtiene la clave y el valor de un array de este tipo, de esta forma, podemos llenarlo de forma muy sencilla.

Espero que te haya sido de utilidad, cualquier duda no dudes en comentar, un saludo.

31 Comentarios

  1. Redis Leon
    • israel965
  2. Redis Leon
    • israel965
  3. Redis Leon
    • israel965
  4. Redis Leon
    • israel965
  5. Eduardo
    • israel965
  6. Albert
    • israel965
      • Albert
        • israel965
    • israel965
  7. Jane
  8. Luis Velazquez
    • israel965
  9. jhoel
    • israel965
  10. jhoel
    • israel965
  11. jhoel
    • israel965
  12. jhoel
  13. Martin Muñoz
    • israel965
  14. Guillermo

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Desarrolla una tienda en tiempo real con Angular 5 y FirestoreAcceder ahora
+ +