Hvordan få verdien av en rullegardinliste i HTML

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.