Javascript Combobox Tutorial

Kombinasjonsbokser er bokser som brukes i HTML-skjemaer som inneholder tekstalternativer som kan velges. Kombinasjonsbokser kan ta form av rullegardinmenyene, eller en boks med flere synlige alternativer. Javascript kan tolke kombinasjonsboksen valg når en er valgt eller når et skjema klikkes. Javascript kan deretter generere nye skjemaalternativer eller omdirigere til en annen nettside.

Bruksanvisning

1 Start en kode editor eller Notisblokk.

2 Lagre filen med en HTML-forlengelse. Klikk på "File"> "Lagre som." Velg en katalog, og lagre filen med et navn og "Html" forlengelse.

3 Lag en kombinasjonsboks. Skriv inn koden i HTML-dokumentet og klikk på "File"> "Lagre". For å få tilgang til elementene i kombinasjonsboksen med Javascript, må du navngi form, og komponentene. Følgende kode vil skape en kombinasjonsboks:

<Form name = "comboform">

<Velg name = "kombinasjonsboks" size = "1" onChange = "showchange ()">

<Option value = "#"> Place Holder </ option>

<Option value = "#"> Place Holder </ option>

<Option value = "#"> Place Holder </ option>

</ Velge>

4 Skriv Javascript for å fylle kombinasjonsboksen. Skriv inn koden i HTML-filen og klikk på "File"> "Lagre". Javascript kan skrive etiketter i kombinasjonsboksen alternativer. Dette kan være nyttig når du oppretter navigasjonsbokser. Følgende kode fylle alternativene felt og sender brukeren til en nettadresse når en er valgt:

<Script>

<! -

Var category = new Array ()

kategori [0] = new Option ( "SELECT", "")

kategori [1] = new Option ( "Alternativ 1", "http://www.somesite.com")

kategori [2] = new Option ( "Alternativ 1", "http://www.somesite.com")

kategori [3] = new Option ( "Alternativ 1", "http://www.somesite.com")

Var curlevel = 1

Var cacheobj = document.dynamiccombo.stage2

Funksjonen befolke (x) {

for (m = cacheobj.options.length-1; m> 0; m--)

cacheobj.options [m] = null

selectedarray = eval (x)

for (i = 0; i <selectedarray.length; i ++)

cacheobj.options [i] = new Option (selectedarray [i] .text, selectedarray [i] .Value)

cacheobj.options [0] .selected = true

}

funksjon go () {

plassering = cacheobj.options [cacheobj.selectedIndex] .Value

}

befolke (kategori)

// ->

</ Script>

5 Endre teksten av opsjonen og URL til å tilpasse kombinasjonsboksen.