Cómo generar un Dropbox Después de hacer clic en una casilla de verificación

Hacen que los objetos aparecen "mágicamente" en una página web, aprendiendo a utilizar el método de "CreateElement". Los desarrolladores web a menudo necesitan para crear elementos de página, como los buzones, en tiempo real. Un clic en una casilla de verificación, por ejemplo, puede hacer que las cajas de reenvío que aparezca al lado de la casilla de verificación. Los usuarios pueden seleccionar un elemento de la dropbox haciendo clic en su flecha hacia abajo, a continuación, hacer clic en el elemento deseado. Se tarda menos de una docena de líneas de código Javascript para crear este efecto casilla útil.

Instrucciones

1 Poner en marcha un editor HTML y agregue el código siguiente a la sección del cuerpo del documento:

<Div id = "CheckBox1">

<Input id = tipo "CheckBox1" = "casilla de verificación" onclick = "addBox ( 'CheckBox1')" />

</ Div>

Esto crea un div que contiene una casilla de verificación. evento "onclick" de la casilla de verificación llama a una función JavaScript denominada "addBox." Esa función genera un nuevo Dropbox.

2 Agregue el código siguiente a la sección de cabecera del documento:

artículos var = [ "artículo", "artículo"];

Este objeto "elementos" contiene los elementos que aparecerán en el dropbox.

3 Agregue la siguiente función JavaScript para el guión de la sección del documento:

artículos var = [ "artículo", "artículo"];

función addBox (checkboxID) {

var checkboxObj = document.getElementById (checkboxID);

Caja var = document.createElement ( "select");

for (var i = 0; i <items.length; i ++) {

var = NewOption document.createElement ( "opción");

newOption.text = artículos [i];

box.options.add (NewOption);

}

checkboxObj.appendChild (cuadro);

}

Esta función crea un nuevo Dropbox y lo llena con los valores de las pruebas almacenados en la matriz "elementos". El método "appendChild" anexa la lista desplegable para el control de casilla de verificación.

4 Guarde el documento. Abrirlo en un navegador y haga clic en la casilla de verificación. La función de JavaScript genera un dropbox y lo muestra al lado de la casilla de verificación.

Consejos y advertencias

• La matriz de "elementos" en este ejemplo contiene dos artículos. Añadir tantos elementos a la matriz como te gusta para hacer que aparecen en el dropbox. Tenga en cuenta que el evento de clic en la casilla pasa el valor "id" de la casilla de verificación de la función JavaScript. Su evento click debe pasar este valor a la función de hacer que el código funcione.