Ejercicio JavaScript: Menú dinámico de marcas
Ejercicio JavaScript: Menú dinámico de marcas

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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

 







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 5 / 5. Recuento de votos: 1

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.