Het gebruik van een variabele menulijst in JavaScript

Het gebruik van een variabele menulijst in JavaScript


Een drop-down menu is een uitvouwbare lijst met tekstitems op een webpagina die gebruikers uit met hun muis selecteren kunnen. De selectie van een gebruiker kan worden ingediend als onderdeel van een formulier of gebruikt voor het activeren van JavaScript-code voor meer dynamische effecten en functionaliteit. JavaScript kan ook worden gebruikt om dynamisch wijzigen de inhoud van een drop-down menu nadat de pagina is geladen, zodat u kunt de configuratie van het menuopties beschikbaar voor de gebruiker on-the-fly.

Instructies

1

Voeg de volgende code tussen de tags "hoofd" van uw HTML-document:

< script type = "text/javascript" >

functie addMenuItem(menuObj,itemname,index) {}

menuObj = document.getElementById(menuObj);

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

newItem.text=itemname;

menuObj.add(newItem,menuObj.options[index]);

}

functie removeMenuItem(menuObj,index) {}

menuObj = document.getElementById(menuObj);

menuObj.remove(index);

}

< / script >

Deze twee functies toevoegen en verwijderen van items uit een drop-down menu, respectievelijk. Het menu wordt geïdentificeerd door zijn unieke 'id' attribuut. De variabele "index" wordt gebruikt om een locatie in het menu: het eerste item in een menu heeft de index waarde "0," de volgende '1', enzovoort.

2

Maak een drop-down menu in de hoofdtekst van een HTML-document met code als volgt:

< select id = "menu1" >

< optie > Menu Item 1 < / optie >

< optie > Menu Item 2 < / optie >

< optie > Menu Item 3 < / optie >

< / select >

Als u met meerdere drop-down menu's in één pagina, geeft elke tag "selecteren" een unieke 'id' attribuut.

3

Voeg de volgende code toe aan de hoofdtekst van een HTML-document voor het testen van de JavaScript-functies in het menu dat u hebt gemaakt:

< input id = "input" type = "text" / >

< input type = "button" value = "Menu Item toevoegen" onClick="addMenuItem('menu1',document.getElementById('input').value)" / >

< input type = "button" value = "Menu-Item verwijderen #" onClick="removeMenuItem('menu1',parseInt(document.getElementById('input').value));" / >

4

De pagina opslaan en laden in een webbrowser. Typ iets in het tekstveld en klik op 'Menu-Item toevoegen'. Klik op het drop-down menu en zie dat uw item heeft toegevoegd. Typ het getal 0 in het veld en klik op "verwijderen Menu object met objectnummer." Het eerste item is verwijderd uit het menu.

Tips & waarschuwingen

  • Een derde numerieke argument doorgeeft aan "addMenuItem" om het nieuwe item op een bepaalde indexlocatie in het menu invoegen in plaats van aan het eind.