Una vez más aquí, esta noche voy a dejar colgado un pequeño ejercicio muy útil (a mi modo de ver), para realizar con JavaScript. En casi todas las páginas web con formularios, este tipo de menú dinámico doble creo que son indispensables. El ejercicio lo voy a dividir en dos archivos, uno será menu.html y otro será menu.js, dónde cargaremos los arrays necesarios para llevar a cabo este ejercicio.
El enunciado del ejercicio para hacerse una idea será el siguiente:
Diseñar una página web que muestre un formulario que permita introducir al usuario su marca y modelo de coche preferida (dentro de un número de opciones definidas por nosotros). El segundo menú (el del modelo) se construirá dinamicamente monstrando distintas opciones dependiendo de la marca seleccionada en el primer menú.
Para que nadie se pierda, aquí van algunas marcas y modelos que utilizaré en el ejercicio de este menú dinámico:
- Citroen: C2,C3,C4,C5
- Peugeot: 107, 208, 308, 408
- Renault: Twingo, Clio, Megane, Laguna
- Seat: Panda, Ibiza, Altea, Toledo
Y bueno, con esto creo que queda claro de lo que va este ejercicio. Ahora, para no pedir las buenas costumbre, en este enlace se puede ver el resultado final del ejercicio. Para terminar, aquí va el código de ambos archivos.
El código del menú dinámico realizado con JavaScript:
menu.htm
<html>
<head>
<title>
Menú dinámico de marcas
</title>
<meta charset="UTF-8">
<!--Cargamos el archivo javascript-->
<script src="marcas.js" language="javascript" type="text/javascript">
<!--
//-->
</script>
<script language="javascript">
<!--
function mostrarModelos()
{
//Si el tamaño de menuModelo es mayor que uno
if (fMarcas.menuModelo.length>1)
{
totalModelo = fMarcas.menuModelo.length;
for (contador=1; contador<totalModelo; contador++)
{
fMarcas.menuModelo.options[1]=null;
}
}
//si el valor cargado de menuMarcas es X el select de los modelos continuará deshabilitado
if (fMarcas.menuMarcas.value == "x")
{
fMarcas.menuModelo.selectedItem = 0;
fMarcas.menuModelo.disabled = true;
} else {
//matrizElegida tendrá el valor matriz y se le concatena el valor que tiene la
//marca en el select (que será el nombre de la matriz que va a cargar)
matrizElegida = "matriz" + fMarcas.menuMarcas.value;
for (contador = 0; contador<eval(matrizElegida).length; contador++)
{
//recorremos el array elegido y creamos un option con cada elemento
fMarcas.menuModelo.options[contador+1] = new Option (eval(matrizElegida)[contador],contador+1);
}
//se activa el select en el que se muestran los modelos.
fMarcas.menuModelo.disabled = false;
}
}
//-->
</script>
</head>
<body>
<form name="fMarcas">
<!--Select que muestra las marcas de coches que cuando cambia de valor carga la función mostrarModelos-->
<select name="menuMarcas" onChange="mostrarModelos();">
<option value="x">ELIJA UNA MARCA</option>
<option value="01">Citroen</option>
<option value="02">Peugeot</option>
<option value="03">Renault</option>
<option value="04">Seat</option>
</select>
<!--Select que va a cargar los distintos modelos de cada marca-->
<select name="menuModelo" disabled>
<option value=0>TODAS LAS MARCAS</option>
</select>
</form>
</body>
</html>
marcas.js
//SE DEFINEN LAS MATRICES CON LOS MODELOS DE LAS MARCAS
matriz01 = new Array ("C2","C3","C4","C5");
matriz02 = new Array ("107","208","308","408");
matriz03 = new Array ("Twingo","Clio","Megane","Laguna");
matriz04 = new Array ("Panda","Ibiza","Panda", "Toledo");
//FIN DE DEFINICION DE LAS MATRICES DE MARCAS