Listas Dependientes en JavaScript (2)

Bueno, ahora si comentemos el codigo anterior, la primr 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;
}

Bueno espero que les sea util, un saludo

Autor: El Guru Programador
http://www.elguruprogramador.com.ar/zonas/ver.asp?cod=13

Usuarios que han visto este tema también han visto...

- Cambiar el tamaño de letra dinámicamente
- Abrir ventanas nuevas de forma no intrusiva en XHTML
- Objetos en JavaScript
- Efecto Terremoto
- Clicks en 20 segundos en Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento