Hvordan få verdien av en rullegardinliste i HTML
Web-applikasjoner ofte trenger å vite verdien av et element som en bruker velger. Hvis dette elementet er en tekstboks eller en annen grunnleggende kontroll, kan programmet bare undersøke kontrollens "Text" eiendommen for å få sin verdi. Du kan også bestemme den valgte verdien i en mer avansert kontroll, for eksempel en HTML nedtrekkslisten. Rullegardinlister kan inneholde et lite antall elementer, for eksempel dager i uken, eller hundrevis av elementer trukket fra en produktdatabase. Aktiver websiden til å oppdage valgte rulle elementer ved å legge en enkel Javascript-funksjon til HTML-dokumentet.
Bruksanvisning
1 Lansere noen HTML editor eller Notisblokk, og åpne en av HTML-dokumenter.
2 Kopier koden nedenfor og lim den inn i dokumentets hoveddel:
<Velg id = "dropDown1">
<Option value = A> Alternativ A </ option>
<Option value = B> Alternativ B </ option>
<Option value = C> Alternativ C </ option>
<Option value = D> Alternativ D </ option>
</ Velge>
<Input type = "button" value = "Vis Drop-Down Value" onclick = "checkDropDown ( 'dropDown1')" />
Inngangs knappen passerer navnet på en rullegardinlisten til en Javascript-funksjon som bestemmer listens valgte verdien. Koden over knappen definerer nedtrekkslisten.
3 Legg til følgende kode i HTML-dokumentet manus seksjon:
funksjon checkDropDown (id) {
Var dropDownObject = document.getElementById (id);
Var valgt = dropDownObject.value;
alert ( "Selected value =" + valgt);
}
Denne funksjonen - kalt ved knappetrykk - henter nedtrekkslisten objekt og kontrollerer sin verdi eiendom. Funksjonen lagrer også at verdien i variabelen som heter "valgt". En varselboks viser at verdien i dette eksempelet, men du kan bruke denne verdien slik du vil.
4 Lagre dokumentet. Start en nettleser, og vise dokumentet. Du vil se på rullegardinlisten og på knappen.
5 Klikk på rullegardinlisten, og klikk deretter ett av elementene i listen. Klikk på "Vis Drop-Down Value" -knappen. Javascript-funksjonen kjører og viser valgt verdi.
Hint
- Hvis du arbeider med flere nedtrekkslistene, bestemme deres valgte verdier ved å sende sine ID-verdier til "checkDropDown" -funksjonen.