Es muy habitual que al crear algún desarrollo, tengamos un campo select, donde al seleccionar una de sus opciones, carga de forma dinámica otro combo con las subcategorías de esa categoría seleccionada.
Lo primero que haremos será la creación de la base de datos que vamos a utilizar en nuestro ejemplo.
CREATE TABLE IF NOT EXISTS `ajax_categories` ( `id` int(11) NOT NULL AUTO_INCREMENT, `category` varchar(50) NOT NULL, `pid` int(11) NOT NULL, PRIMARY KEY (`id`) )
El código HTML de nuestro ejemplo es el siguiente:
Select Category
Select Sub Category
En este código lo que hacemos es crear el combo de las categorías principales haciendo la consulta a la base de datos para obtener las categorías que tienen “id” igual a 0.
También tendremos un “div” oculto que serán donde se carguen las subcategorías de la categoría padre.
Cuando se seleccione una categoría, se ejecutará el archivo php encargado de obtener los resultados de las categorías hijos. El código es el siguiente:
Para que todo funcione mediante AJAX, debemos de indicar de alguna forma que cuando se produzca un cambio en el combox principal, se ejecute el código que haga la llamada al php que obtiene las subcategorías.
El código javascript utilizado para esto es el siguiente:
0 comentarios:
Publicar un comentario