Hvordan å generere en Dropbox når jeg klikker på en avkrysningsboks

Gjør objekter vises "magisk" på en webside ved å lære å bruke "CreateElement" metoden. Webutviklere ofte behov for å lage sideelementer som opplastingskontoer i sanntid. Et klikk på en avmerkingsboks, for eksempel, kan føre til en dropbox til vises ved siden av boksen. Brukere kan deretter velge et element fra dropbox ved å klikke på pil ned og deretter klikke på ønsket element. Det tar mindre enn et dusin linjer med Javascript-kode for å lage dette nyttig boksen effekt.

Bruksanvisning

1 Start en HTML-editor og legg til følgende kode til dokumentets hoveddel:

<Div id = "checkbox1">

<Input id = "Checkbox1" type = "checkbox" onclick = "addBox ( 'checkbox1')" />

</ Div>

Dette skaper en div som inneholder en avkrysningsboks. Den boksen er "onclick" event kaller en Javascript-funksjon som heter "addBox." At funksjonen genererer en ny dropbox.

2 Legg til følgende kode i dokumentet hode seksjon:

Var elementer = [ "element", "Item"];

Denne "elementer" objekt innehar elementer som vil vises i dropbox.

3 Legg til følgende Javascript-funksjonen til dokumentets manuset seksjon:

Var elementer = [ "element", "Item"];

funksjon addBox (checkboxID) {

Var checkboxObj = document.getElementById (checkboxID);

Var boks = document.createElement ( "select");

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

Var newOption = document.createElement ( "alternativ");

newOption.text = elementer [i];

box.options.add (newOption);

}

checkboxObj.appendChild (boks);

}

Denne funksjonen lager en ny dropbox og fyller det med testverdier som er lagret i "elementer" array. Den "appendChild" metoden legger nedtrekkslisten for å avmerkingsboksen kontroll.

4 Lagre dokumentet. Åpne den i en nettleser, og klikk på boksen. Javascript-funksjonen genererer en dropbox og viser det ved siden av boksen.

Hint

• Den "elementer" array i dette eksemplet inneholder to elementer. Legg til så mange elementer å denne matrisen som du liker å gjøre dem vises i dropbox. Legg merke til at boksen er klikkhendelsen passerer boksen er "id" verdi til Javascript-funksjonen. Din klikkhendelsen må passere denne verdien til funksjonen for å gjøre koden arbeid.