Hvordan bruke HTML til å fylle en ListBox av filnavn

Listboxes gi en praktisk måte for nettstedet eiere for å vise elementer, for eksempel filnavn, på en webside. Brukere vise en liste over navn som vises i en liste, og klikk de som de ønsker. HTML ikke har en kontroll som heter "listeboksen." Det gjør imidlertid, har en "velg" kontroll som viser rulle elementer. Ved å legge "størrelse" og "flere" parametre til denne kontrollen, kan du lage en listeboksen for HTML-websiden og fylle den med filnavn.

Bruksanvisning

1 Legg til følgende kode i HTML-dokumentet:

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

<Input type = "button" value = "Legg filnavn" onclick = "addFileNames ( 'ListBox1')" />

Den første linjen oppretter en tom "velg" kontroll med en id av "ListBox1." Dens "flere" eiendom gjør at brukerne kan velge mer enn ett element om gangen ved å holde nede "Ctrl" -tasten når du klikker elementer. Den andre linjen skaper en knapp. At knappen har en "onclick" event som går listeboksen id verdi, "ListBox1," til en funksjon som fyller listeboksen.

2 Legg Java erklæring delen inne i dokumentet "<head>" -delen:

Var filnavn = [

"Filnavn1",

"Filnavn2",

"Filnavn3"

];

Dette skaper en rekke filnavn du vil bruke for å teste koden. Denne rekken, heter "filnavn", inneholder tre navn.

3 Kopier følgende Javascript-kode, og lim den inn under koden vist i forrige trinn:

funksjons addFileNames (listboxID) {

Var listeboksen = document.getElementById (listboxID);

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

Var listboxSize = listbox.options.length;

listbox.options [listboxSize] = new Option (filnavn [i], i);

}

Var listBoxSize = listbox.options.length;

listbox.size = listBoxSize;

}

Denne funksjonen looper gjennom "filnavn" array og legger hvert navn til listeboksen. De siste to linjer beregne størrelsen på listeboksen og utvider det slik at alle elementer vises.

4 Lagre dokumentet og vise den i en nettleser. Du vil se en tom listeboksen og knappen din. Klikk på knappen. Koden går og legger filnavnene til listeboksen. Klikk på et filnavn for å velge det. Hold nede "Ctrl" -tasten og klikk flere navn å velge mer enn én samtidig.

Hint

  • Legg til flere filnavn som trengs for å Javascript matrise ved å opprette flere array elementer. For eksempel, for å legge til en annen filnavn som heter "Filename4," føyer den til bunnen av listen over eksisterende navn i "filnavn" array.