Hvordan hente valgt verdi fra rullegardinmenyen JavaScript
I JavaScript kommer vi ofte over brukervennlige websider som inkluderer et spørreskjema eller et skjema for å få verdien av enkelt- eller flere valgte alternativer. Når vi håndterer en quiz-basert webside, ønsker vi dessuten brukeren om statusen mot det oppgitte svaret med en verdi (riktig, galt). I slike tilfeller er det veldig nyttig å hente de valgte verdiene fra rullegardinmenyen for å gi klarhet og spare tid på brukerens slutt.
Denne artikkelen vil guide deg til å hente utvalgte verdier fra en rullegardinliste i JavaScript.
Hvordan få/hente valgt verdi fra rullegardinmenyen i JavaScript?
For å hente valgt verdi fra dropdown i JavaScript, kan du bruke:
-
- “verdi”Eiendom.
- “SelectedIndex”Eiendom.
Vi vil nå gå gjennom hver av de nevnte tilnærmingene en etter en!
Metode 1: Få/hente valgt verdi fra rullegardinmenyen i JavaScript ved hjelp av verdiegenskap
“verdi”Eiendom returnerer verdienattributtet til et tekstfelt. Vi bruker denne metoden for å få det valgte alternativet fra en rullegardinliste og vise verdien:
Syntaks
SelectElement.verdi
Her, "verdi”Eiendom vil returnere den aktuelle verdien som er valgt fra rullegardinlisten.
La oss gå gjennom følgende eksempel for en bedre forståelse av konseptet:
Eksempel
I dette eksemplet vil vi spesifisere ID som heter “plukke ut”Og sett inn alternativverdiene som skal velges i rullegardinlisten. Disse opsjonsverdiene vil bli plassert i "”Tagger.
Nå vil vi ta med en knapp med en "ved trykk" begivenhet. Dette vil fungere på en slik måte at når knappen med verdi “Sjekk alternativet”Presset, funksjonen”SelectValue ()”Vil bli utløst:
Velg kjønn fra den gitte rullegardinlisten:
Verdien av det valgte kjønn er:
class = "output">
Deretter vil vi erklære en funksjon som heter “SelectValue ()”. Her vil vi bruke “dokument.QuerySelector ()”Metode for å få tilgang til IDen til den opprettede rullegardinmenyen. Etter det vil vi få verdien av det valgte kjønn fra rullegardinlisten ved å bruke “verdi”Eiendom. Til slutt "Tekstkonkurranse”Eiendom vil returnere tekstinnholdet i den valgte verdien og vise den:
Utgangen fra implementeringen ovenfor vil resultere som følger:
Metode 2: Hent valgt verdi fra rullegardinmenyen i JavaScript ved bruk av "SelectedIndex" -egenskap
“alternativ”Eiendom returnerer en samling av alle elementer og“SelectedIndex”Eiendom returnerer indeksen for det valgte alternativet fra“alternativ”Eiendom i en rullegardinliste. Vi vil bruke begge sammen for å velge et spesifisert alternativ og vise det tilsvarende alternativets verdi ved å få tilgang til indeksen.
Syntaks
plukke ut.Alternativer [Velg.SelectedIndex].verdi
Ovennevnte syntaks vil hjelpe til med å hente verdien av det valgte rullegardinmeny-alternativet ved å bruke indeksen.
Se på følgende eksempel for demonstrasjon:
Eksempel
Vi vil nå bruke den samme HTML -koden gitt i forrige eksempel og gjøre noen endringer i JavaScript -koden. For å gjøre det, vil vi definere funksjonen “SelectValue ()”Og tilgang til den tildelte IDen til rullegardinmenyen som heter“plukke ut”Ved hjelp av dokumentet.QuerySelector () -metode. Etter det vil vi bruke “alternativer”Eiendom i kombinasjon med andre egenskaper, inkludert“SelectedIndex”For å hente verdien av det valgte alternativet.
Til slutt "Tekstkonkurranse”Egenskaper vil bli brukt i denne metoden for å returnere tekstinnholdet i den valgte verdien og vise den tilsvarende verdien:
Produksjon
Vi har gitt de enkleste metodene for å hente en valgt verdi fra rullegardinmenyen i JavaScript.
Konklusjon
For å få/hente valgt verdi fra rullegardinmenyen i JavaScript, bruk "verdi”Eiendom for å få den valgte varens verdi fra rullegardinlisten og“alternativ”Eiendom sammen med“SelectedIndex”Eiendom for å få settet med alternativer og få verdien av det valgte alternativet ved å få tilgang til det aktuelle alternativets indeks. Denne oppskrivningen har forklart metodene for å få/hente utvalgte verdier fra rullegardinmenyen i JavaScript.