Hoe om te selecteren opties doorlopen

Hoe om te selecteren opties doorlopen


Wanneer u website formulieren in HTML-pagina's maakt, kunt u opnemen "select" elementen met een drop-down lijst van opties voor gebruikers om uit te kiezen. Kunt u toegang krijgen tot de details van deze option-elementen binnen de JavaScript-code voor uw site. Door het creëren van een lus in uw JavaScript-code, kunt u sequentieel doorzoeken de Selecteer opties, toegang tot informatie over de HTML-inhoud en kenmerken binnen hen. U kunt ook de HTML-inhoud wijzigen als dit past bij de toepassing van uw pagina.

Instructies

1

Maak een functie in de head-sectie van uw HTML-webpagina. Tussen het openen en sluiten van koptags, voeg het volgende script sectie en functie overzicht:

< script type = "text/javascript" >
functie loopThroughOptions(selectID) {}
functie uitvoering hier
}
< / script >

2

Voeg de code binnen de functie lus via uw selecteert u opties. Voeg toe de volgende knop in uw pagina om de pagina de functie aan te roepen:

< input type = "button" onclick="loopThroughOptions('foodselect')" waarde = "loop" / >

Deze knop is voor demonstratie, maar zal toestaan u om te zien dat uw looping code functies. De functie-aanroep wordt de select-element-ID als een parameter doorgegeven.

3

Het select-element toevoegen aan uw pagina met opties. Als u nog geen een select-element in uw pagina, gebruikt u de volgende voorbeeldcode voor markup:

< select id = "foodselect" >
< optie waarde = 'apple' > Apple < / optie >
< optie waarde = "kaas" > kaas < / optie >
< optie waarde = "UI" > UI < / optie >
< / select >

Zorg ervoor dat uw code bevat het kenmerk ID, zoals de JavaScript-functie zal het gebruiken om te identificeren van het element. Plaatst het besturingselement select vóór de test knop.

4

Voeg de volgende code binnen uw javascriptfunctie te krijgen een verwijzing naar het select-element met de waarde van het kenmerk ID:

var Selecteer = document.getElementById(selectID);

Deze code gebruikt de overgegaane parameter om een verwijzing naar het element. Voeg de volgende code, met behulp van dit element te verwerven van een array variabele met de option-elementen:

var kiest = select.options;

Deze variabele bevat nu een matrix die de code kunt doorlopen.

5

Maak een lus voor uw selecteert u opties:

var opt = 0;
voor (opt = 0; opt < opts.length; opt ++) {}
verwerken van de opties
}}

Deze code zal één keer uitvoeren voor elke optie-item in het opgegeven select-element. De lus begint bij nul, die de eerste indexpositie in een matrix is, dan de array doorlopen totdat het definitieve standpunt wordt bereikt.

6

Verwerken elk element in de matrix van uw selecteert u opties. De volgende voorbeeldcode kan worden gebruikt om te controleren dat uw functie werkt; toe te voegen binnen de lus:

waarschuwing ("Optie" + opt + "=" + opts[opt].value);

7

Uw pagina opslaan en openen in een webbrowser te testen. Moet u het kenmerk value van elk element van de optie naar een waarschuwingsvenster, na elkaar geschreven. U kunt toegang krijgen tot andere aspecten van het option-element zoals de HTML-inhoud als volgt:

waarschuwing ("Optie" + opt + "=" + opts[opt].innerHTML);

Tips & waarschuwingen

  • U kunt ook aspecten van option-elementen instellen in JavaScript te gebruiken.
  • Wees voorzichtig niet per ongeluk een oneindige lus maken wanneer doorlopen arrays.