Tecnología

Inicio

Cómo usar HTML para rellenar un cuadro de lista de nombres de archivo

Cuadros de lista proporcionan una manera conveniente para los propietarios del sitio para mostrar los elementos, tales como nombres de archivo, en una página web. Los usuarios pueden ver una lista de los nombres que figuran en una lista y haga clic en los que ellos quieren. HTML no tiene un control denominado "cuadro de lista." Lo hace, sin embargo, tiene un control de "seleccionar", que muestra los elementos desplegables. Mediante la adición de parámetros "múltiples" a que el control de "tamaño" y, se puede crear un cuadro de lista para su página Web HTML y rellenarla con los nombres de archivo.

Instrucciones

1 Agregue el código siguiente a su documento HTML:

<Select id = "ListBox1"> </ select>

<Input type = "button" value = "Añadir nombres de archivo" onclick = "addFileNames ( 'ListBox1')" />

La primera línea crea un vacío "seleccionar" control con un ID de "ListBox1." Su propiedad "múltiple" permite a los usuarios seleccionar más de un elemento a la vez, mantenga pulsada la tecla "Ctrl" al hacer clic en los elementos. La segunda línea crea un botón. Ese botón tiene un evento "onclick" que pasa valor de ID del cuadro de lista, "ListBox1," a una función que rellena el cuadro de lista.

2 Añadir esta sección de declaración de JavaScript dentro de la sección de su documento "<head>":

los nombres de fichero var = [

"Nombrearchivo1",

"Nombrearchivo2",

"NombreDeArchivo3"

];

Esto crea una matriz de nombres de archivo que va a utilizar para probar el código. Esta matriz, llamada «nombres de archivo" contiene tres nombres.

3 Copia el siguiente código JavaScript, y pegarlo a continuación el código que aparece en el paso anterior:

addFileNames función () {listboxID

var cuadro de lista = document.getElementById (listboxID);

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

var = listboxSize listbox.options.length;

listbox.options [] = listboxSize nueva opción de nombres de archivo ([i], i);

}

var = listBoxSize listbox.options.length;

listbox.size = listBoxSize;

}

Esta función coloca a través de la "nombres de archivo" matriz y añade cada nombre para el cuadro de lista. Las dos últimas líneas de calcular el tamaño del cuadro de lista y se expande de modo que todos los elementos que aparecerán.

4 Guarde el documento y verlo en un navegador. Verá un cuadro de lista vacía y su botón. Clic en el botón. El código se ejecuta y añade los nombres de archivo al cuadro de lista. Haga clic en un nombre de archivo para seleccionarlo. Mantenga pulsada la tecla de "Ctrl" y haga clic en varios nombres para seleccionar más de uno al mismo tiempo.

Consejos y advertencias

  • Añadir más nombres de archivos que sean necesarios para la matriz de JavaScript mediante la creación de elementos de la matriz adicionales. Por ejemplo, para agregar otro nombre, digamos "Filename4," añadir a la parte inferior de la lista de nombres existentes en la matriz "nombres de archivo".

Artículos relacionados