Het koppelen van een HTML-knop met een Drop-Down Box

Sitebezoekers klikken meestal vervolgkeuzelijsten om ze te openen. Ontwikkelaars deze compacte besturingselementen plaatst, ook bekend als selectievakjes, op webpagina's om ruimte te besparen. Totdat een gebruiker op een vervolgkeuzelijst klikt, neemt het alleen één rij op een Web-pagina, hoewel het honderden items bevatten kan. Als u geven gebruikers de mogelijkheid willen zou om openen en sluiten van een vervolgkeuzelijst met behulp van een HTML-knop, koppelt deze twee besturingselementen met behulp van een JavaScript-functie.

Instructies

1

Start een HTML-editor of een teksteditor, en open een van uw HTML-documenten.

2

Voeg de code hieronder aan het hoofdgedeelte van het document:

< select id = "dropDownBox1" >

< optie > A < / optie >

< optie > B < / optie >

< optie > C < / optie >

< optie > D < / optie >

< / select >

< input type = "button" value = "Open Drop Down" onclick = "openDropdown ('dropDownBox1', '3')" / >

Deze code maakt u een vervolgkeuzelijst en een knop. Wanneer u op de knop klikt, roept het een javascriptfunctie met de naam openDropdown. De knop wordt ook de drop-down box van id-waarde doorgegeven aan de functie samen met de nummer 3.

3

Voeg de volgende JavaScript-code toe aan de kopsectie van uw document:

functie openDropdown (dropDown, grootte) {}

var dropDownObject = document.getElementById(dropDown);

dropDownObject.size = grootte;

}

Deze functie--aangeroepen door de knop--haalt een verwijzing naar de drop-down box en sets zijn grootte-waarde voor de grootte doorgegeven aan de functie in de lijst met argumenten.

4

Sla het document, en start uw browser. Open het document in de browser. De drop-down box verschijnt boven de knop op de webpagina.

5

Klik op de knop. De code wordt uitgevoerd en de drop-down box automatisch wordt geopend.

Tips & waarschuwingen

  • Opmerking dat de gebeurtenis click van de knop de nummer 3 aan de JavaScript-functie doorgegeven, hoewel in de drop-down box vier items voorkomen. Bij het aanroepen van de functie op een echte webpagina, elke waarde die u wilt doorgeven. U hoeft niet te geef een waarde op die gelijk is aan het aantal items in de drop-down box. U kunt ook het toevoegen van een andere knop waarmee wordt gesloten de drop-down box wanneer erop wordt geklikt. Dergelijke een opdrachtknop maken door dupliceren de knopcode beschreven in de vorige stappen en het doorgeven van nul aan de JavaScript-functie in plaats van 3.