Tilordne en skjult verdi fra en nedtrekksmeny i Javascript

December 22

Javascript er et språk som er mye brukt til å endre brukergrensesnitt dynamisk. Ved hjelp av Javascript, webutviklere kan få tilgang til de elementene som er en del av HTML Document Object Model, direkte identifisering, vurdering og manipulere elementer som utgjør HTML-sider. HTML DOM-elementer er bare HTML-elementer og har en rekke attributter vanligvis tilgjengelig. Disse egenskapene, inkludert synlighet attributter, kan ha sine verdier dynamisk endret, lagt til eller slettet basert på handlinger foretatt av sluttbrukeren, som å velge en verdi fra en rullegardinmeny.

Bruksanvisning

1 Åpne en teksteditor og opprette en ny tekstfil kalt dropdownHidden.html. Vanligvis, velge "Ny" fra "Fil" -menyen skaper nye filer.

2 Legg noen grunnleggende HTML-koder til filen, inkludert en <html> -taggen, en <head> tag, en </ head> tag, en <body> -koden, en </ body> -koden og </ html> -taggen.

3 Legg en åpen <script> tag og et nært </ script> -koden til filen. Sett script type tilskrive "text / javascript". All tekst plassert mellom disse to skilletegn vil bli vurdert Javascript-koden når siden lastes.

4 Erklærer en Javascript-funksjon som heter "storeVal ()" og legge en åpen klammeparentes - {- og en tett krøllete brace -} - for å angi plasseringen av funksjonen kropp. Den storeVal funksjonen tar ingen argumenter.

5 Deklarere en variabel som heter "hiddenId" mellom storeVal () funksjonens åpne og lukke klammeparentes. Bruk Javascript document.getElementById metode for å hente plasseringen av en skjult inngang feltet med id "hiddenField".

6 Erklærer en annen variabel kalt "dropDownId" på linje etter hiddenId variabel. Bruk document.getElementById metode for å hente plasseringen av rullegardinmenyen som vil bli brukt til å fylle den skjulte inntastingsfeltet.

7 Erklærer en tredje variabel kalt "selectedElement" på linje etter dropDownId variabel. Bruk dropDownId henvisning for å hente indeksen for den valgte fra rullegardinmenyelement.

8 Sett "hiddenId" variabel "verdi" til "selectedElement" variable. Legg denne koden på linjen etter selectedElement variabel.

9 Opprett en HTML rullegardinmenyen ved å plassere en <select> tag mellom <body> og </ body> -kodene i dropdownHidden.html. Gi <velg> tagge en "id" verdien "rullegardinmenyen". Bruk en "onclick" event å ringe storeVal funksjonen når brukeren velger et element fra rullegardinmenyen. Gi en <alternativ> tag til <velg> meny med en verdi på "A". Label <alternativ> tag "A" og lukk </ option> tag. Tildele en andre <alternativ> tag til <velg> meny med en verdi på "B". Label <alternativ> tag "B", lukker </ option> tag og lukk </ velg> tag.

10 Legg en HTML <input> koden til filen umiddelbart etter </ velg> tag. Gi <input> tagge en type attributt "skjult" og id "hiddenField". Lagre og lukk dropdownHidden.html. DropdownHidden.html vises som vist nedenfor:

<Html>

<Head>

fungere storeVal ()

{

Var hiddenId = document.getElementById ( "hiddenField");

Var dropdownId = document.getElementById ( "rullegardinmenyen");

Var selectedElement = dropdownId.options [dropdownId.selectedIndex] .Value;

hiddenId.value = selectedElement;

}

</ Script>

</ Head>

<Body>

</ Velge>

</ Body>

</ Html>

11 Åpne dropdownHidden.html i en nettleser. Velg "A" element fra rullegardin å lagre verdien til den skjulte feltet. Fordi feltet er skjult, kan det være litt vanskelig å bekrefte koden visuelt. Se i Tips-delen for å få hjelp.

Hint

HTML Document Object Model inneholder en rekke gjenstander, blant annet bilder og former.
En inntastingsfelt med type attributten "skjult" vil ikke vises når du tester kode som plasserer informasjon i et skjult felt. Prøv å endre type-attributtet til "tekst" under testing.
Andre verdier som kan brukes sammen med <input> tag inkludere tekst, passord boksen, radio, sende, reset, fil, skjult, bilde og knapp.
Noen små forskjeller kan eksistere i HTML DOM i eldre versjoner av nettlesere. De fleste av disse forskjellene har blitt løst i nyere nettlesere.