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

Un clic en una página Web dinámica puede alterar su contenido.

generar dropbox

Hacer 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 dropboxes en tiempo real. Un clic en una casilla de verificación, por ejemplo, puede causar un dropbox a aparecer al lado de la casilla de verificación. Los usuarios pueden seleccionar un elemento de la caja de reenvío por hacer clic en la flecha hacia abajo y luego hacer clic en el elemento deseado. Se tarda menos de una docena de líneas de código JavaScript para crear esta utilidad casilla efecto.

Inicie un editor HTML y agregue el código siguiente a la sección del cuerpo del documento:

div id = "CheckBox1"

entrada de tipo id = "Checkbox1" onclick = "checkbox" = "addBox ('CheckBox1')" /

/ Div

Esto crea un div que contiene una casilla de verificación. Evento "onclick" de la casilla llama a una función JavaScript llamada "addBox." Esta función genera un nuevo dropbox.

Agregue el código siguiente a la sección principal del documento:

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

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

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

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

función addBox (checkboxID) {

checkboxObj var = document.getElementById (checkboxID);

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

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

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

newOption.text = items [i];

box.options.add (newOption);

}

checkboxObj.appendChild (caja);

}

Esta función crea una nueva caja de reenvío y la rellena con los valores de las pruebas almacenadas en el arsenal "artículos". Los "appendChild" método anexa la lista desplegable a la casilla de control.

Guarde el documento. Abrir 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

Los "elementos" de matriz en este ejemplo contiene dos artículos. Agregue tantos elementos a la matriz como quieras para que aparezcan en el dropbox. Tenga en cuenta que el evento click del checkbox pasa el valor "id" de la casilla a la función JavaScript. El evento de clic debe pasar este valor a la función para que el código funcione.