Inicio Apuntes FPApuntes DAWEjercicio JavaScript: Menú dinámico de marcas

Ejercicio JavaScript: Menú dinámico de marcas

Publicado por entreunosyceros
Publicado el: Última actualización:

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

 

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.