BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Combobox de 3 niveles con datos cargados vía Ajax y Json

11/AGO/2014 27.433 visitas Ver comentarios
Combobox de 3 niveles con datos cargados vía Ajax y Json

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Como prácticamente todo lo que se hace se puede mejorar, mi antiguo artículo del Combobox o Selects Dependientes no iba a ser la excepción y ha llegado la hora de que reciba un pequeño upgrade en su funcionamiento.

Básicamente se trata de lo mismo, de 3 listas dependientes que se relacionan entre sí por un registro en la base de datos que las une... volveremos a llamarlos PADRE, HIJO y NIETO... donde cada uno de nuestros PADRES, ha tenido un HIJO que a su vez le ha dado un NIETO.

El código esta vez, está simplificado al máximo, lo único complejo es una serie de parámetros que cada combo necesita de antemano para su carga original, permitiendo que si editas datos ya guardados, cada uno de los selects pueda tener los datos ya predefinidos o empezar en blanco si es para un alta de registro nueva.

Para ello, tenemos nuestra función en PHP llamada combo que pintará en pantalla nuestros selects con una serie de parámetros tales como:

  • $db: cadena de conexión a MySQL
  • $nombre: nombre que llevará nuestro select en el atributo name e id
  • $valor: un valor predefinido para marcar un SELECTED en el select
  • $tabla: tabla de la que vamos a extraer registros
  • $campos: campos que vamos a seleccionar para no hacer un select *
  • $condicion: condición de consulta de registros (ej: id=1)
  • $orden: campo por el que se ordena la consulta mysql
  • $modo: ascendente o descendente para el orden de registros
  • $espadre: indica si el combo es el padre o es hijo

La principal función de espadre será la de mostrar o no valores en cada una de las listas al cargar por primera vez.

Y como se trata de optimizar, esta vez no haremos un $.load como hacíamos en el artículo anterior sino que vaciaremos y rellenaremos nuestros selects con datos cargados mediante JSON, en una consulta PHP a un fichero con un código muy sencillo que listará los registros y los pintará usando la función json_encode de PHP.

Como siempre, seleccionando un PADRE se recargarán HIJOS y NIETOS, seleccionando un HIJO se recargará el NIETO y se irán mostrando los valores que se encuentren en la base de datos según las combinaciones elegidas.

Es más complejo de explicar que de ver, por lo tanto, te invito a que mires la demo, te descargues el código y, si te parece que vale la pena, me ayudes a difundirlo para que llegue a todo el que lo necesite.

No publico los códigos aquí abajo, todos, incluso las bases de datos, están en el fichero .zip del botón de descarga que aparece más arriba. Recuerda rellenar el config.inc.php con tus parámetros de conexión a la base de datos.

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 22 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018