Listas dependientes
Hoy trataremos un problema que varias
veces se nos presenta, las famosas listas dependientes, ¿que es esto?, tenemos dos
listas, una lista con varios items y la otra con los items que corresponden al item
seleccionado en la primer lista ¿Que Lio?...Bueno para hacerlo mas grafico veamos primero
el resultado y luego explicare como llegamos a esto.
Fijate que si seleccionas un trimestre,
la lista de meses se modifica mostrando los meses que corresponden al trimestre
seleccionado.
Lo primero que hacemos es construir las
dos listas con los elementos correspondientes, la lista de los meses la llenamos con la
primer opcion que es la del primero trimestre dado que cuando carge la pagina esta opcion
esta seleccionada por defecto.
<form name="formulario"
method="post" action="">
<div align="center">Trimestre
<select name="trimestres" OnChange="cambiar()">
<option value="1er. Trimestre" selected>1er. Trimestre</option>
<option value="2do. Trimestre">2er. Trimestre</option>
<option value="3er. Trimestre">3er. Trimestre</option>
<option value="4to. Trimestre">4to. Trimestre</option>
</select>
Meses
<select name="meses">
<option value="Enero" selected>Enero</option>
<option value="Febrero">Febrero</option>
<option value="Marzo">Marzo</option>
</select>
</div>
</form>
Cabe destacar de este codigo que debemos
respetar los nombres de los objetos dado que sino el JavaScript no funcionara, otra cosa a
destacar es la declaracion del evento 'OnChange' de la lista de trimestres, esta
declaracion hace que cada ves que cambie el elemento seleccionado se ejecute la funcion de
JavaScript llamada 'cambiar()', veamos ahora que contiene esta funcion...
function cambiar()
{
var index=document.forms.formulario.trimestres.selectedIndex;
formulario.meses.length=0;
if(index==0) trimestre1();
if(index==1) trimestre2();
if(index==2) trimestre3();
if(index==3) trimestre4();
}
Esta y las demas funciones JavaScript van
entre las etiquetas llamadas 'script' y las podemos ubicar en cualquier sector de la
pagina, pero lo mas apropiado es ponerlas dentro de las etiquetas 'head'.
<script
language="JavaScript">
function cambiar()
.
.
.
</script>
Bueno, ahora si comentemos el codigo
anterior, la primer linea de codigo declara la variable llamada 'index' y a su ves le
asigna el valor del elemento seleccionado en la lista trimestres, el valor 0 corresponde
al primer trimestre, el 1 al segundo y asi hasta el 3 que corresponde al ultimo trimestre
es decir el cuarto. Despues la segunda linea de codigo asigna 0 al la propiedad length de
la lista meses, esta propiedad maneja el numero de elementos que tiene esa lista, a
ponerla a cero se borran todos los elementos de la lista meses. Luego siguen un grupo de
if que evaluan la variable 'index', si esta es igual a cero va a la funcion
'trimestre1()', si es 1 va a la funcion 'trimestre2()' y si sucesivamente, ahora ¿que
hacen esta funciones? simple, llenan la lista de meses por ejemplo 'trimestre1()' llena la
lista meses con los primeros tres meses del año, veamos como...
function trimestre1(){
opcion0=new Option("Enero","Enero","defauldSelected");
opcion1=new Option("Febrero","Febrero");
opcion2=new Option("Marzo","Marzo");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
Aqui creamos 3 variables a las cuales les
asignamos el objeto 'Option' creado mediante la palabra clave 'new', para crear un objeto
del tipo 'Option' debemos especificar como minimo 2 parametros, el primero es el texto que
aparecera en la lista y el segundo es el 'listvalue' que tendra dicho elemento. Tambie
existe un tercer parametro opcional que sirve para especificar si el elemento esta
seleccionado,si queremos que esto sea asi debemos poner el tercer parametro con el valor
'defauldSelected'.
Despues de crear los objetos 'Option'
debemos asignarselos a la lista de los meses. Las demas funciones son iguales a esta lo
unico que cambia son los valores de los meses, igual aca va el codigo de las otras
funciones...
function trimestre2(){
opcion0=new Option("Abril","Abril","defauldSelected");
opcion1=new Option("Mayo","Mayo");
opcion2=new Option("Junio","Junio");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
function trimestre3(){
opcion0=new Option("Julio","Julio","defauldSelected");
opcion1=new Option("Agosto","Agosto");
opcion2=new Option("Septiembre","Septiembre");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
function trimestre4(){
opcion0=new Option("Octubre","Octubre","defauldSelected");
opcion1=new Option("Noviembre","Noviembre");
opcion2=new Option("Diciembre","Diciembre");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
Script completo
<script language="JavaScript">
function cambiar()
{
var index=document.forms.formulario.trimestres.selectedIndex;
formulario.meses.length=0;
if(index==0) trimestre1();
if(index==1) trimestre2();
if(index==2) trimestre3();
if(index==3) trimestre4();
}
function trimestre1(){
opcion0=new Option("Enero","Enero","defauldSelected");
opcion1=new Option("Febrero","Febrero");
opcion2=new Option("Marzo","Marzo");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
function trimestre2(){
opcion0=new Option("Abril","Abril","defauldSelected");
opcion1=new Option("Mayo","Mayo");
opcion2=new Option("Junio","Junio");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
function trimestre3(){
opcion0=new Option("Julio","Julio","defauldSelected");
opcion1=new Option("Agosto","Agosto");
opcion2=new Option("Septiembre","Septiembre");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
function trimestre4(){
opcion0=new Option("Octubre","Octubre","defauldSelected");
opcion1=new Option("Noviembre","Noviembre");
opcion2=new Option("Diciembre","Diciembre");
document.forms.formulario.meses.options[0]=opcion0;
document.forms.formulario.meses.options[1]=opcion1;
document.forms.formulario.meses.options[2]=opcion2;
}
</script>
Mauro "Guru" es el webmaster de El Guru Programador
|
Del.icio.us
Digg
Technorati
