Hvordan dynamisk endre listeboksen med Javascript

November 19

Den velger tag i HTML normalt brukes til å lage en rullegardinmeny. Men hvis du justere størrelsen attributt, skaper velger tag en listeboksen. En listeboksen er et grensesnitt med en liste over alternativer som brukeren kan velge mellom ved å klikke på dem. Javascript kraftige tilgang til HTML Document Object Model, eller DOM, kan du endre dynamisk en listeboksen element etter at siden er lastet, slik at du kan programma velge, legge til og fjerne elementer fra den basert på brukerundersøkelser.

Bruksanvisning

1 Legg til følgende Javascript-kode mellom hodet kodene i HTML-dokumentet:

funksjon selectItem (ref, indeks) {

document.getElementById(ref).selectedIndex = index;

}

</ Script>

Denne funksjonen tar to argumenter: en referanse til id-attributt av listeboksen som bør endres, og nummeret på elementet for å velge. Merk at elementene er nummerert fra 0, så for å velge det første elementet av en listeboks med id "lbox", bør du ringe funksjon på denne måten:

selectItem ( "lbox", 0);

2 Legg til følgende funksjon mellom skriptkodene i hodet av HTML-dokumentet for å legge til elementer i en listeboksen:

funksjon addItem (ref, navn, indeks) {

ref = document.getElementById(ref);

Var newopt = document.createElement ( "alternativ");

newopt.text = navn;

ref.add (newopt, ref.options [index]);

ref.size = ref.options.length;

}

Den "ref" argumentet er, som før, id listeboksen. "Name" er navnet på den nye muligheten til å legge til. Den "indeks" argument er valgfritt - hvis du leverer funksjonen et tall for det, vil det nye elementet settes inn i indeksen du angir. Ellers vil elementet vises på slutten av listeboksen. Den siste linjen i funksjonen endrer størrelsen på listen for å sørge for at alle alternativene passer. Hvis du vil at listeboksen for å bo på en fast høyde, fjern denne linjen.

3 Plasser følgende funksjon mellom skriptkodene å fjerne elementer fra en listeboksen:

funksjon removeItem (ref, indeks) {

ref = document.getElementById(ref);

ref.remove (indeks);

ref.size = ref.options.length;

}

Som med "addItem," hvis du har tenkt å holde listeboksen på en fast høyde, fjerne den siste linjen av denne funksjonen.

4 Legg til følgende kode i kroppen av HTML-dokumentet for å teste ut disse funksjonene. Ikke bekymre deg om detaljer som "parseInt" metoden, bare ta hensyn til måten funksjonene kalles fra "INNGANG" elementer.

<Alternativ> Element One </ option>

<Alternativ> Element To </ option>

<Alternativ> Element Tre </ option>

</ Velge>

Input tekst eller indeks:

5 Lagre HTML-dokumentet, åpne den i en nettleser og bruk kontrollene til å endre listeboksen dynamisk. Du kan endre ulike listboxes bruke de samme funksjonene ved å tildele hver ListBox sin egen unike id-attributt, deretter bruke de respektive IDer når du ringer funksjonene.

Hint

Du kan også legge til og fjerne OPTGROUP elementer til et listeboksen ved hjelp av add-metoden.