Yshopnoosa.com

Hur man skapar en Dropbox genom att klicka på en kryssruta

Hur man skapar en Dropbox genom att klicka på en kryssruta

Gör objekt visas "magiskt" på en webbsida genom att lära sig använda metoden "CreateElement". Webbutvecklare måste ofta skapa sidelement som dropboxes i realtid. Klicka på en kryssruta, exempelvis kan orsaka en dropbox ska visas bredvid kryssrutan. Användare kan markera ett objekt från dropbox genom att klicka på dess nedpilen och sedan på önskat objekt. Det tar mindre än ett dussin rader JavaScript-kod för att skapa denna användbara kryssrutan effekt.

Instruktioner

1 Starta en HTML-redigerare och lägga till följande kod i dokumentets body-avsnitt:

< div id = "checkbox1" >

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

< / div >

Detta skapar en div som innehåller en kryssruta. I rutan "vid klickning" händelse kräver en JavaScript-funktion som heter "addBox." Att funktionen genererar en ny dropbox.

2 Lägga till följande kod i dokumentets head-avsnitt:

var träffar = ["objekt", "Element"];

"Objekt" objektet innehåller de objekt som visas i dropbox.

3 Lägg till följande JavaScript-funktionen till dokumentets script avsnitt:

var träffar = ["objekt", "Element"];

funktion addBox(checkboxID) {

var checkboxObj = document.getElementById(checkboxID);

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

för (var jag = 0; jag < items.length; i ++) {

var newOption = document.createElement("option");

newOption.text = objekt [i];

Box.Options.Add(newOption);

}

checkboxObj.appendChild(box);

}

Denna funktion skapar en ny dropbox och med testvärden lagrade i matrisen "objekt". Metoden "appendChild" lägger till listan till kryssrutan kontroll.

4 Spara dokumentet. Öppna den i en webbläsare och klicka i kryssrutan. JavaScript-funktionen genererar en dropbox och visar den bredvid kryssrutan.

Tips & varningar

  • Arrayen "objekt" i det här exemplet innehåller två artiklar. Lägga till så många objekt till den matrisen som du vill få dem att verka i dropbox. Observera att den checkhäftet klickhändelsen passerar i rutan "id" värde att JavaScript-funktionen. Din klickhändelsen måste klara det här värdet till funktionen för att göra koden fungerar.