Listas Dependientes en JavaScript

Listas Dependientes en JavaScript

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>

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

- Comprobar email con JavaScript
- Texto de Colores
- Detectar el idioma y país del usuario con Javascript
- Mensaje en la barra de estado al pasar el ratón por encima con JavaScript
- Precarga de Imágenes

- Versión imprimible de este documento

- Enviar por e-mail este documento