|
Para no usar idas y vueltas al servidor se pueden traer todos los datos y enlazarlos usando javascript. Esto se uso cuando el tamaño de las listas es reducido y no afectara el performance en la carga de la pagina.
<script type=”text/javascript”>
function Fila(i, c,d){
this.codigo=i;
this.categ=c;
this.descr=d;
}
function updateSelect(rootList, dpndList, datos){
category = rootList.options[rootList .selectedIndex].value;
for (var i= dpndList.options.length-1;i>=0; i--)
dpndList.options[i]=null;
var j=0;
dpndList.options[j++]=new Option("SELECCIONE "+category,"");
for (var i=0; i<datos.length; i++){
if (category==datos[i].categ)
dpndList.options[j++]=new Option(datos[i].descr,datos[i].codigo);
}
dpndList.selectedIndex=0;
}
</script>
Para crear las listas en la interfaz se requiere:
<script type=”text/javascript”>
var autos = new Array();
tipos[0]=new Fila ("1","FORD" ,"ESCORT");
tipos[1]=new Fila ("2","FORD" ,"TAURUS");
tipos[2]=new Fila ("3","FORD" ,"FIESTA");
tipos[4]=new Fila ("5","MERCEDES BENZ" ,"CLK");
tipos[5]=new Fila ("6","MERCEDES BENZ" ,"SL");
tipos[6]=new Fila ("4","SUZUKI" ,"BALENO");
tipos[7]=new Fila ("5","SUZUKI" ,"AERIO");
tipos[8]=new Fila ("6","SUZUKI" ,"SWIFT");
</script>
<body>
<form name="modelo">
<select name="marca" OnChange="updateSelect(this,modelo.valor,autos)">
<option value="">SELECCIONE CATEGORIA
<option value="1">FORD</option>
<option value="2">MERCEDES BENZ</option>
<option value="3">SUZUKI</option>
</select>
<select name="valor">
</select>
</form>
</body>
</html>
|
