Crear selector de categorias y subcategorias - Ajax Sin Ajax, Facil y muy util ♛ Top Hosting

Visto 22691 veces

Para poder mostrar subcategorias dependiendo de la categoria elegida debes en primer lugar tener los datos almacenados en la base de datos, suponiendo que habra marcas en categorias y modelos de vehiculos en subcategorias la base de datos seria similar a la siguiente:

Tabla marcas

id marca

Tabla modelos

id_modelo nombre id_marca

cada vez que agregues un nuevo modelo tendras que añadirle el id de marca. Por supuesto podrias agregarle mas datos como el año, color, motor, etc. Pero para crear el selector de marcas y modelos alcanza con los datos mencionados.

En nuestro documento principal llamado selector.php incluiremos un select html y un iframe. El select incluira onchange="cambiarsub(this.value)". Y en el head o antes de </body>(recomendado) incluiremos la funcion cambiarsub().

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sin título</title> </head> <body><label for="select">Select:</label> <select name="select" id="select"> <option>Audi</option> <option>Chevrolet</option> <option>Ford</option> </select> <iframe name="iframe" id="iframe" frameborder="0"></iframe> <script type="text/javascript"> function cambiarsub(categoria){ document.getElementById("iframe").src="cambiarsub.php?categoria=" + categoria; } </script> </body> </html>

Listo! la funcion cambiarsub() mostrara el contenido de cambiarsub.php cada vez que se cambie de categoria.

En cambiarsub.php obtendras el id de la categoria con $_GET["categoria"] con lo cual podras realizar una consulta "SELECT * FROM modelos WHERE id_marca=" . $_GET["marca"]. El codigo para cambiarsub.php seria:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sin título</title> </head> <body> <select name="subcategoria" id="subcategoria"> <option value="0">Elegir categoria</option> <?php $categoria=$_GET["categoria"]; $sql="SELECT * FROM modelos WHERE id_marca=" . $categoria; $rs_subcategorias=$db->obtener; foreach ($rs_subcategorias as $sub){ echo '<option value="' . $sub->id_modelo . '">' . $sub->nombre . '</option>'; } ?> </select> </body> </html>

En cambiarsub.php sera necesario agregar algunos estilos css para que el selector de subcategoria quede igual al selector de categorias. Principalmente seria quitar margenes y padding al body y los estilos basicos del select.

Para añadir nuevas subcategorias podras realizarlo desde el archivo cambiarsub.php. En resumen deberias en el select de categorias incluir un option con un id especial. En la funcion cambiarsub() si el id es el del option "agregar subcategoria" solicitar mediante javascript el nombre de las subcategoria y en src="cambiarsub.php" añadir un parametro mas con &add=1. De esta forma en cambiarsub.php preguntas si add=1 antes realiza un insert a la base de datos.

Visitar articulo completo sobre Ajax Sin Ajax, Facil y muy util