Ejemplo para cargar elementos en un segundo control DropDown List, cuando seleccionamos una opción en la primera lista de opciones del menú desplegable.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Una tarea bastante habitual al trabajar con formularios webs, específicamente con controles DropDown List, es la de poder rellenar y cargar en un segundo control, cuando seleccionamos una opción en la primera lista de opciones del menú desplegable.

Este plugin que utiliza la librería jQuery, te permite realizar esto de una forma sencilla y rápida. El ejemplo es muy fácil de configurar y adaptar a nuestros formularios, utilizando muy poco código.

Mas información sobre el programa.

¿ Cómo funciona ?

En el archivo de descarga, se incluye un ejemplo o página HTML de demostración ( demo.html).

En él encontrarás los dos DropDown List. En el primero puedes seleccionar dos opciones: Frutas o vegetales. Al seleccionar una de las dos, se cargarán una lista de elementos o items dependiendo del elemento seleccionado.

Vista previa de los controles DropDown.

Instalación del plugin

Antes que nada, es necesario incluir en la página ( en la sección HEAD ), las referencias a los archivos javascript ( La librería jQuery y el plugin ). Los archivos son jquery.doubleSelect.js y jquery-1.4.2.min.js

En el código fuente HTML quedaría de la siguiente forma:

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>título de la página</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.doubleSelect.js"></script> </head>

Luego, también en la sección Head, un sencilla función en Javascript que se encarga de cargar los items y elementos de cada control de lista.

El código fuente lo puedes ver en la página de ejemplo. También muestra como visualizar el control vacío ( sin ningún item o elemento ) hasta que el usuario seleccione una opción, así como también establecer los valores por defecto del DropDown.