Hvordan bruke en variabel menyliste i Javascript

Hvordan bruke en variabel menyliste i Javascript


En rullegardinmeny er en utvidbar liste over tekst oppføringer på en webside som brukerne kan velge mellom med musen. En brukerens valg kan sendes inn som en del av et skjema eller brukes til å utløse Javascript-kode for mer dynamiske effekter og funksjonalitet. Javascript kan også brukes til å dynamisk endre innholdet i en rullegardinmenyen etter at siden er lastet, slik at du kan konfigurere menyalternativer er tilgjengelige for brukeren on-the-fly.

Bruksanvisning

1 Sett inn følgende kode mellom "hodet" kodene i HTML-dokumentet:

<Script type = "text / javascript">

funksjon addMenuItem (menuObj, varenavn, indeks) {

menuObj = document.getElementById(menuObj);

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

newItem.text = varenavn;

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

}

funksjon removeMenuItem (menuObj, indeks) {

menuObj = document.getElementById(menuObj);

menuObj.remove (indeks);

}

</ Script>

Disse to funksjonene legge til og fjerne elementer fra en rullegardinmeny, henholdsvis. Menyen er identifisert av sin unike "id" attributt. Den "indeks" variabelen brukes til å angi en plassering i menyen: det første elementet i en meny har indeksverdien "0" neste "1" og så videre.

2 Lag en rullegardinmenyen i kroppen av HTML-dokument med kode som dette:

<Velg id = "menu1">

<Alternativ> Menu Item 1 </ option>

<Alternativ> Meny Sak 2 </ option>

<Alternativ> Meny Sak 3 </ option>

</ Velge>

Hvis du bruker flere drop-down menyer på en side, gi hver "velge" tag en unik "id" attributt.

3 Legg til følgende kode i kroppen av HTML-dokumentet for å teste Javascript-funksjoner på menyen du opprettet:

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

<Input type = "button" value = "Legg til menypunktet" onclick = "addMenuItem ( 'menu1', document.getElementById ( 'inngang'). Verdi)" />

<Input type = "button" value = "Fjern menypunkt #" onclick = "removeMenuItem ( 'menu1', parseInt (document.getElementById ( 'inngang') verdi).);" />

4 Lagre siden og legg den i en nettleser. Skriv noe i tekstfeltet og klikk "Legg menypunkt." Klikk på rullegardinmenyen og se at varen har blitt lagt til. Skriv inn tallet 0 i feltet og klikk "Fjern Meny Varenummer." Det første elementet er fjernet fra menyen.

Hint

  • Pass en tredje numerisk argument for å "addMenuItem" for å sette inn det nye elementet på en bestemt indeks plasseringen på menyen, i stedet for på slutten.