Listas desplegables llenadas dinámicamente (tag select) 2do. Caso
Empezemos con este caso, como les comenté anteriormente la idea es hacer una sola carga de la página, y se preguntarán y ¿cómo podré ver los datos de la segunda lista sin recargar la página otra vez como en el caso anterior?, pues acá nos ayudaremos de Javascript (JS).
Con JS en la carga inicial de la página guardaremos los datos para la segunda lista en arreglos (array), luego así cuando se seleccione algún elemento de la primera lista llenaremos la segunda lista con los datos del arreglo, acá como tenemos que acceder a las tablas del ejercicio anterior, debemos generar el código JS incrustado en código PHP, ¿complicado? veremos paso a paso este caso.
Nuestro script se llamará anidado2.php
Colocaremos la conexión a la base datos antes de la etiqueta html.
< ?php
/* Conectamos a los datos */
$cn = mysql_connect("localhost","usuario","clave");
mysql_select_db("bd_anidados");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
Utilizaremos el código del ejercicio anterior para cargar la primera lista:
<body>
<form name="f1" action="#" method="post">
<b>Departamentos : Provincias</b><br />
<select name="sDep">
<option value="-1">Seleccione</option>
< ?php
$rs=mysql_query("SELECT * FROM departamento");
while ($reg=mysql_fetch_assoc($rs)) { // departamentos
$cd=$reg['coddep']; // código departamento
$dd=$reg['desdep']; // descripción departamento
echo "<option value=$cd>$dd";
}
?>
</select>
</form></body>
Seguiremos utilizando un formulario para poder acceder a las listas (existe otra forma indicando id’s que veremos en el tercer caso), no necesitamos indicar la acción en el formulario por lo que cambiaremos el atributo action por ‘#’, igualmente quitaremos la condición if dentro del bucle while (1er. caso) y dejaremos la línea que llena la lista.
Necesitamos crear la segunda lista sin elementos.
<select name='sPro'></select>
Luego pasamos a crear ahora la parte de JS, la idea de esto es crear arreglos con el siguiente formato:
var provincia_1=new Array(‘Chachapoyas’, ‘Bagua’, ‘Bongara’, ‘Condorcanqui’, ‘Luya’, ‘Rodríguez de Mendoza’, ‘Utcubamba’);
var provincia_2=new Array(‘Huaraz’, ‘Aija’, ‘Antonio Raymondi’, ‘Asuncion’, ‘Bolognesi’, ‘Carhuaz’, ‘Carlos F. Fitzcarral’, ‘Casma’, ‘Corongo’, ‘Huari’, ‘Huarmey’, ‘Huaylas’, ‘Mariscal Luzuriaga’, ‘Ocros’, ‘Pallasca’, ‘Pomabamba’, ‘Recuay’, ‘Santa’, ‘Sihuas’, ‘Yungay’);
var provincia_3=new Array(‘Abancay’, ‘Andahuaylas’, ‘Ancabamba’, ‘Aymaraes’, ‘Cotabambas’, ‘Chincheros’, ‘Grau’);
var provincia_4=new Array(‘Arequipa’, ‘Camaná’, ‘Caravelí’, ‘Castilla’, ‘Caylloma’, ‘Condesuyos’, ‘Islay’, ‘La unión’); etc
Al seleccionar el departamento Amazonas que su código es 1 escogeremos los elementos del arreglo provincia_1, acá tenemos el código para crear los arreglos.
<title>Anidado 2</title>
< ?php
echo "<script language='JavaScript'>\n";
$sql="SELECT coddep FROM departamento";
$rs= mysql_query($sql);
while ($reg=mysql_fetch_array($rs)){
$cd=$reg['coddep'];
echo "var provincia_".$cd."=new Array(";
$sql1="SELECT despro FROM provincia WHERE coddep=".$cd;
$rs1= mysql_query($sql1);
$filas=mysql_num_rows($rs1);
for ($i=0;$i< $filas;$i++) {
$pro=mysql_result($rs1,$i,'despro');
if ($i==0)
echo "'".$pro."'";
else
echo ",'".$pro."'";
};
echo ");\n";
}
echo "</script>";
?>
En este bloque PHP tenemos dos ciclos o bucles anidados, el primero o externo recorre todos los departamentos de la tabla.
SELECT coddep FROM departamento
De la consulta tomamos el código del departamento, en el bucle interior recorremos todas las provincias de acuerdo al departamento.
SELECT despro FROM provincia WHERE coddep=».$cd;
La variable $cd almacena el código del departamento y así filtramos para el departamento actual, finalmente creamos los arreglos de la forma indicada anteriormente.
echo «var provincia_».$cd.»=new Array(«;
El bucle for se encarga de llenar el arreglo con sólo las provincias del departamento actual.
Hasta ahí ya tenemos los datos del lado del cliente, si ejecutamos y vemos en nuestro navegador el código fuente de la página (Ctrl+U en Mozilla y Alt + Ver y seleccionar código fuente) veremos los arreglos con los datos, esta es la forma que indicaba en el primer artículo sin necesidad de base de datos.
Nos queda solamente indicar que se cargué el segundo arreglo de acuerdo al departamento seleccionado, ubicamos la línea donde creamos la primera lista y agregamos el evento onChange.
<select name="sDep" onChange='ver_provincia()' >
Esto significa que cuando se seleccione un valor de la primera lista ejecutará la función JS ver_provincia, el contenido de la función es:
}
echo "function ver_provincia(){\n
var dpto
dpto = f1.sDep[document.f1.sDep.selectedIndex].value
mis_provincias=eval('provincia_' + dpto)
num_pro = mis_provincias.length
document.f1.sPro.length = num_pro
for(i=0;i<num_pro ;i++){
f1.sPro.options[i].value=mis_provincias[i]
f1.sPro.options[i].text=mis_provincias[i]
}
}\n";
echo "</script>";
?>
¿Qué hay en la función ver_provincia?, bueno tomamos de la primera lista (sDep) el valor del elemento seleccionado (dpto = código del departamento), luego a la variable mis_provincias le cargamos el arreglo de acuerdo al dpto, inicializamos el segundo arreglo con la cantidad de elementos del segundo arreglo es decir la cantidad de las provincias, luego con un bucle llenamos recorremos el arreglo y cargamos la lista… sencillo, espero que sí
Con una sola carga de página hemos llenado dinámicamente la segunda lista.
Estos casos están probados en Mozilla 2.0.0.14, IE7 y Safari 3.1.1, hasta pronto amig@s.