MultiDropDown es un script para realizar la tarea de convertir una respuesta json en
elementos de un dropdown, y poder construir dropdowns relacionales. Este script esta probado en distintos navegadores(Firefox 2+, IE 6+, Safari 9+).
Características
- Su implementación es muy sencilla.
- El dropdown puede ser totalmente modificable.
- Soporta dropdowns dependientes.
Implementación
Para este ejemplo utilizaremos PHP y MySQL, primero entramos a un administrador para MySQL, sea PHPMyAdmin u otro y ejecutamos este script.
CREATE DATABASE `librerias` ;
CREATE TABLE `librerias`.`lista` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nombre` VARCHAR( 50 ) NOT NULL
)
CREATE TABLE `librerias`.`detalle` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`lista_id` INT NOT NULL ,
`nombre` VARCHAR( 50 ) NOT NULL
)
INSERT INTO lista(id ,nombre)
VALUES
('1', 'Javascript'),
('2', 'CSS'),
('3', 'PHP'),
INSERT INTO detalle(`id` ,`lista_id` ,`nombre`)
VALUES
('1', '1', 'Prototype'),
('2', '1', 'Mootools'),
('3', '1', 'jQuery'),
('4', '1', 'YUI'),
('5', '1', 'Dojo'),
('6', '2', 'BluePrint'),
('7', '2', 'DockMenu'),
('8', '2', 'Multibox'),
('9', '3', 'CSS dropdown Menu'),
('10', '3', 'FPDF'),
('11', '3', 'JPGraph'),
('12', '3', 'PHPLinq'),
('13', '3', 'PHPMailer');
Este script creara una DB(librerias), dos tablas (lista y detalle) y llenara con algunos registros las tablas. La tabla detalle es dependiente de lista por en campo lista_id.
Ahora construiremos dos archivos .php (json_lista.php y json_detalle.php), en los cuales incluiremos este código respectivamente.
// json_lista.php
//incluimos la conexion
require 'cn.php';
//guardamos la consulta
$query = "SELECT *FROM lista";
//ejecutamos la consulta
$rs = mysql_query($query);
$rows=array();
//recorremos los registros retornados
while($row=mysql_fetch_assoc($rs))
{
$rows[]=$row;
}
//devolvemos en formato json la data
echo json_encode($rows);
// json_detalle.php
//incluimos la conexion
require 'cn.php';
//recibimos el parámetro (lista_id)
$param = (int)$_REQUEST['id'];
$rows=array();
//verificamos el parametro
if ($param!=0)
{
//guardamos la consulta
$query = "SELECT *FROM detalle WHERE lista_id='$param'";
//ejecutamos la consulta
$rs = mysql_query($query);
//recorremos los registros retornados
while($row=mysql_fetch_assoc($rs)){
$rows[]=$row;
}
}
//devolvemos en formato json la data
echo json_encode($rows);
Eso es todo del lado del servidor, este es un ejemplo claro en el ámbito del trabajo.
Ahora pasemos a la vista del usuario con el html.
Primero debemos incluir la librería Prototype.js y multidropdown.js en el head de tu pagina web.
<script src="prototype.js" type="text/javascript"></script>> <script src="multidropdown.js" type="text/javascript"></script>
Ahora pondremos dos dropdown, uno sera la lista cabecera y la otra sera su detalle la cual se llenara nuevamente en el evento onchange de la cabecera.
Listas <select id="lista" name="lista"> <option value="0">vacio</option> </select> Detalles <select id="deta" name="deta"> <option value="0">vacio</option> </select>
Luego nos queda nada mas que llamar a la función que generara los dropdown.
//parametro url,id_dropdown
getJson('json.php','lista');
//carga de lista dependiente
$('lista').observe('change',
function(el){
getJson('json2.php','deta',$F('lista'))
});
Recursos
