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
