Hvordan Loop Gjennom Velg Valg

Når du lage nettside skjemaer i HTML-sider, kan du inkludere "velg" elementer med en drop-down liste med alternativer for brukerne å velge mellom. Du må kanskje få tilgang til detaljer om disse opsjonselementer innen Javascript-koden for nettstedet. Ved å opprette en sløyfe i Javascript-koden, kan du iterere gjennom velg alternativer, tilgang til informasjon om HTML-innhold og egenskaper i dem. Du kan også endre HTML-innhold hvis dette passer i forbindelse med siden din.

Bruksanvisning

1 Lag en funksjon i hodet delen av HTML-webside. Mellom åpning og lukking hodet kodene, legge følgende skript delen og funksjon disposisjon:

<Script type = "text / javascript">
funksjons loopThroughOptions (selectID) {
// Funksjon gjennomføringen her
}
</ Script>

2 Legg inn koden inne i funksjonen til å sløyfe gjennom velge alternativer. Å instruere siden for å kalle funksjonen, legger følgende knapp på siden din:

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

Denne knappen er for demonstrasjon, men vil tillate deg å se at looping kode funksjoner. Funksjonen samtale passerer velger element-ID som en parameter.

3 Tilsett velger element til siden din med alternativer. Hvis du ikke allerede har en utvalgt element på siden din, kan du bruke følgende eksempel markup kode:

<Velg id = "foodselect">
<Option value = "eple"> Apple </ option>
<Option value = "ost"> Cheese </ option>
<Option value = "løk"> Onion </ option>
</ Velge>

Sørg for at koden inneholder ID-attributtet, som Javascript-funksjonen vil bruke den til å identifisere elementet. Plasser velger kontroll før testknappen.

4 Legg til følgende kode i Javascript-funksjonen for å få en referanse til å velge element ved hjelp av ID attributtverdi:

Var velge = document.getElementById (selectID);

Denne koden bruker føres parameteren for å få en referanse til elementet. Legg til følgende kode, ved hjelp av dette elementet til å tilegne seg en rekke variabel som inneholder opsjonselementer:

Var opts = select.options;

Denne variabelen inneholder nå en rekke at koden kan sløyfe gjennom.

5 Lag en løkke for å velge alternativer:

Var opt = 0;
for (opt = 0; opt <opts.length; velge ++) {
// prosess alternativene
}}

Denne koden vil kjøre en gang for hvert alternativ element i den angitte velger elementet. Sløyfen starter på null, noe som er den første indeks posisjonen i en matrise, og deretter gjentas gjennom matrisen til det når den endelige stilling.

6 Behandle hver element i å velge alternativer array. Følgende eksempelkode kan brukes til å kontrollere at funksjonen fungerer; legge den i bue:

alert ( "Option" + opt + "=" + Valg [opt] .Value);

7 Lagre siden din og åpne den i en nettleser for å teste den. Du bør se verdien egenskap av hvert opsjonselementet skrevet til et varsel dialog, en etter en. Du kan få tilgang til andre deler av opsjonselementet som sin HTML-innhold som følger:

alert ( "Option" + opt + "=" + Valg [opt] .innerHTML);

Hint

• Du kan også sette aspekter av opsjonselementer i Javascript.
• Vær forsiktig så du ikke tilfeldigvis skape en uendelig løkke ved gjentakelse gjennom arrays.