Hvordan lenke en HTML-knapp med en drop-down boks

Besøkende klikker vanligvis drop-down bokser for å åpne dem. Utviklere plassere disse kompakte kontroller, også kjent som velger bokser, på websider for å spare plass. Inntil en bruker klikker en drop-down boks, det bare opptar én rad på en webside, selv om det kan inneholde hundrevis av elementer. Hvis du ønsker å gi brukerne muligheten til å åpne og lukke en drop-down boks ved hjelp av en HTML-knappen, knytte disse to kontrollene ved hjelp av en Javascript-funksjon.

Bruksanvisning

1 Start en HTML-editor eller tekst editor, og åpne en av HTML-dokumenter.

2 Legg inn koden nedenfor i dokumentets hoveddel:

<Velg id = "dropDownBox1">

<Option> A </ option>

<Option> B </ option>

<Option> C </ option>

<Option> D </ option>

</ Velge>

<Input type = "button" value = "Åpne Drop Down" onclick = "openDropdown ( 'dropDownBox1', '3')" />

Denne koden skaper en drop-down boks og en knapp. Når du klikker på knappen, kaller det en Javascript-funksjon som heter openDropdown. Knappen passerer også drop-down boks id verdi til funksjonen sammen med nummer 3.

3 Legg til følgende Javascript-kode i dokumentet hode seksjon:

funksjon openDropdown (dropdown, størrelse) {

Var dropDownObject = document.getElementById (dropdown);

dropDownObject.size = størrelse;

}

Denne funksjonen - kalt av knapp - får en referanse til den drop-down boksen og setter sin størrelse verdien til størrelsen sendes til funksjonen i argumentlisten.

4 Lagre dokumentet, og starte nettleseren din. Åpne dokumentet i nettleseren. Drop-down boksen vises over knappen på websiden.

5 Klikk på knappen. Koden går og åpner drop-down boks automatisk.

Hint

  • Legg merke til at knappen er klikkhendelsen passerer nummer 3 til Javascript-funksjonen, selv om fire elementer finnes i drop-down boks. Når du ringer funksjonen på en ekte webside, passere noen verdi du vil. Du trenger ikke å passere en verdi som er lik antall elementer i rullegardinlisten. Du kan også legge til en annen knapp som lukker rullegardinlisten når du klikker. Lag en slik knapp ved å duplisere knappen koden beskrevet i de forrige trinnene og passerer null til Javascript-funksjonen i stedet for tre.