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.