Hvordan legge til dynamiske kombinasjonsboks Valg i Javascript

August 25

Nettsider kan presentere brukerundersøkelser elementer innen former, fange brukerdata og sender den til serveren side skript. De velger og opsjonselementer i HTML tillate utviklere å lage drop-down liste eller kombinasjonsboks elementer. Ved hjelp av disse, kan brukeren velge fra et sett forhåndsdefinerte innstillinger. Ved å legge til en Javascript-funksjonen på siden din, kan du endre innholdet på en utvalgt element dynamisk, som brukeren samhandler med siden din. De velger og opsjons gjenstander lar deg lage og legge til nye valg for brukerne.

Bruksanvisning

1 Tilsett velger element til siden din. Sett følgende eksempel HTML markup mellom åpning og lukking body-taggene på websiden:

Dette velger du elementet presenterer tre alternativer som representerer forskjellige dyr. Du kan endre innholdet av alternativene som passer dataene du prøver å fange.

2 Legg en seksjon for Javascript på siden din. Mellom åpning og lukking hodet kodene i filen, legger du til følgende disposisjon kode:

<Script type = "text / javascript">
// funksjonene her
</ Script>

Du kan legge til Javascript-funksjoner i denne delen og sideelementene vil være i stand til å ringe dem på brukermedvirkning eller noen annen hendelse. Du kan også inkludere Javascript i en egen fil og legge en link til den i siden hodet, som et alternativ.

3 Legg en funksjon for å behandle velg alternativ endring. Sett inn følgende funksjon omrisset mellom åpning og lukking skriptkodene i siden hodedelen din:

funksjon addOption () {
// Implementere installere tilleggsutstyr
}

Inne i denne funksjonen, kan du legge inn koden for å endre innholdet i velg element dynamisk. Du kan stille side opp å kalle denne funksjonen på en hendelse som passer funksjonaliteten til siden din.

4 Implementere dynamisk velger tillegg drift. Inne Javascript-funksjonen, som følgende kode for å få en henvisning til å velge element på siden din:

Var selectElem = document.getElementById ( "selectElement");

Du kan alternativt passere velger element ID-attributtet som en parameter om dette passer din side. Denne koden lagrer en referanse til elementet i en variabel. Sett inn følgende kode for å legge til et nytt alternativ til å velge element:

selectElem.add (nytt alternativ ( "Chicken", "kylling"), null);

Denne koden skaper et nytt alternativ objekt; deretter legger den til å velge element ved å sende det som en parameter til funksjonen add. Koden skape det nye alternativet objekt passerer innholdet og verdien av opsjonen til å vises på siden, så endre det etter dine egne behov.

5 Ring Javascript-funksjonen. Du kan utføre funksjonen på brukerens interaksjon med de andre elementene på siden din, men for demonstrasjon kan du endre åpningen body-koden som følger:

Dette vil kalle funksjonen så snart brukerens nettleser laster siden. Lagre HTML-fil og åpne den i en nettleser. Klikk på Velg element for å se innholdet. Du skal se det nye alternativet koden lagt sammen med de opprinnelige alternativene som er skissert i HTML.

Hint

Du kan også endre egenskapene til utvalgte elementer dynamisk, for eksempel stil.
Javascript kan være uforutsigbare i enkelte nettlesere, så teste sidene også.