Hvordan sette den valgte indeksen med Javascript
Javascript er en klient-side skriptspråk som gir webutviklere muligheten til å dynamisk endre de fleste HTML-elementer som finnes i nettsider, inkludert elementer som innbefattes i nedtrekkslistene. Vanligvis webutviklere lage nedtrekkslistene ved hjelp av HTML <velg> tag og fylle dem med individuelle elementer med HTML <alternativ> koder. Hvert alternativ plassert i en drop-down listen har en indeks som kan refereres til og manipuleres ved hjelp av Javascript selectedIndex eiendommen, noe som gir utviklere muligheten til å identifisere og endre de valgte indekser og verdier.
Bruksanvisning
1 Åpne en teksteditor og opprette en ny fil med navnet setIndex.html. Legg noen HTML-koder til filen som inneholder en åpen "<html>" tag, en åpen "<head>" tag, en nær "</ head>" tag, en åpen "<body>" tag, en nær "< / body> "tag, og en nær" </ html> "tag.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Legg en "<script>" tag mellom "<head>" og "</ head>" koder og angi <script> tag type attributt til "text / javascript". Lukk "</ script>" tag.
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Legg en Javascript-funksjon mellom "<script>" og "</ script>" koder og navnet på funksjonen setIndex (). Den setIndex () -funksjonen tar ett argument, plassert i parentes, som heter "indexValue". Den indexValue argumentet vil bli brukt til å sette en "<Velg>" indeksverdi ved å referere til den gitte selectedIndex eiendom. Legg en åpen klammeparentes "{" og et nært krøllete brace "}" for å angi plasseringen av funksjonen kode.
<Html>
<Head>
<Script type = "text / javascript">
funksjon setIndex (indexValue)
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Rediger setIndex () -funksjonen og bruke getElementById () Javascript-metoden og selectedIndex eiendom å referere den valgte indeksverdi på en utvalgt boks med id "selectBox". Sett indeksen til verdien sendes til setIndex () -funksjonen ( "indexValue").
<Html>
<Head>
<Script type = "text / javascript">
funksjon setIndex (indexValue)
{
document.getElementById ( 'selectBox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Legg en "<Velg>" tag mellom "<body>" og "</ body>" koder, gi tag id "selectBox", og legge til tre "<alternativ>" koder til valgboksen. Gi den første "<alternativ>" tagge teksten "First Selection" og lukk den første "</ option>" tag. Gi den andre "<alternativ>" tagge teksten "Second Selection" og lukke andre "</ option>" tag. Gi den tredje "<alternativ>" tagge teksten "Tredje Selection" og lukk den tredje "</ option>" tag. Lukk "</ velg>" tag.
<Html>
<Head>
<Script type = "text / javascript">
funksjon setIndex (indexValue)
{
document.getElementById ( 'selectBox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body>
<Velg id = "selectBox">
<Alternativ> Første seleksjon </ option>
<Alternativ> Second Utvalg </ option>
<Alternativ> Tredje Utvalg </ option>
</ Velge>
</ Body>
</ Html>
6 Legg en "<input>" HTML-koden under close "</ velg>" tag. Gi innspill tag id "indexValue" og en standard "verdi" attributt "2".
<Html>
<Head>
<Script type = "text / javascript">
funksjon setIndex (indexValue)
{
document.getElementById ( 'selectBox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body>
<Velg id = "selectBox">
<Alternativ> Første seleksjon </ option>
<Alternativ> Second Utvalg </ option>
<Alternativ> Tredje Utvalg </ option>
</ Velge>
<Input id = "indexValue" value = "2">
</ Body>
</ Html>
7 Legg en HTML "<-knappen>" tag under "<input>" tag og legge til en onClick () hendelse til knappen som kaller setIndex () -funksjonen. Pass verdien fra "indexValue" innleggingen med Javascript getElementById () -metoden. Sett knappen tekst til "Klikk for å sette indeksen til verdien i inntastingsfeltet." Lukk "</ knapp>" tag og lagre og lukke setIndex.html.
<Html>
<Head>
<Script type = "text / javascript">
funksjon setIndex (indexValue)
{
document.getElementById ( 'selectBox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body>
<Velg id = "selectBox">
<Alternativ> Første seleksjon </ option>
<Alternativ> Second Utvalg </ option>
<Alternativ> Tredje Utvalg </ option>
</ Velge>
<Input id = "indexValue" value = "2">
<-knappen Onclick = setIndex (document.getElementById ( "indexValue"). Verdi)> Klikk for å angi indeksen til verdien i inntastingsfeltet. </ Knapp>
</ Body>
</ Html>
8 Åpne setIndex.html i en nettleser, og klikk på knappen for å endre "selectBox" velg boksen verdien til "2". Skriv inn en annen verdi ( "0", "1") i "indexValue" boksen og klikk på knappen for å endre valgboksen indeks verdi.
Hint
- Valgte indekser kan også stilles og hentes ved hjelp av "verdi" attributt og getElementById metoden.
- Tenk koding en passende reaksjon dersom brukeren forsøker å sette rullegardin indeksen til en ugyldig verdi, for eksempel ved hjelp av en varselboks.
- Velg boksene kan dra nytte av mange stiler tilgjengelig i Cascading Style Sheets (CSS).
- Vanligvis er utvalgte boksene brukes som en del av et HTML-skjema som bruker "<form>" tag.
- En nedtrekksliste som lar flere valg vil returnere bare indeksen for det første alternativet er valgt.
- Den selectedIndex eiendom forutsindeksverdier starter på 0.