utvalgteindex -egenskap i JavaScript

Mens du utvikler et nettsted, kan det være en situasjon der du trenger å få indeksen for det valgte alternativet fra den ekstra rullegardinmenyen. Har du ingen anelse om hvordan du gjør det? Ingen bekymringer! For å håndtere en slik situasjon tilbyr JavaScript et attributt kalt “SelectedIndex”Det brukes til å få indeksen for det valgte alternativet fra rullegardinlisten.

Denne opplæringen vil forklare den utvalgte egenskapen og dens bruk i JavaScript.

Hva er valgtindex -egenskap i JavaScript?

“SelectedIndex”Er JavaScript-egenskapen som brukes til å sette eller returnere det valgte alternativets indeks i den ekstra rullegardinlisten. Den sender ut et tall som representerer indeksen for alternativet som er valgt i HTML-rullegardinmenyen. Mer spesifikt starter indeksen for rullegardinlisten på null, og den returnerer -1 hvis ikke noe alternativ er valgt.

Syntaks

Følg den undergitte syntaksen for å bruke den valgte egenskapen til valgtindex:

SelectObject.SelectedIndex

Her, “SelectObject”Er alternativet som er valgt fra rullegardinmenyen, og den valgte egenskapen vil hente indeksen.

Eksempel 1: Få indeksen for valgt alternativ ved hjelp av SelectedIndex -egenskap med AddEventListener () -metode

Først oppretter vi en rullegardinliste ved hjelp av “”Merk og spesifiser alternativet sitt ved å bruke“”Tagger. Legg deretter til en etikett som vil vise indeksen for det valgte alternativet:

Velg alternativet og få indeksen for det valgte alternativet

C
C++
Html
CSS
Python
Java
JavaScript

I en JavaScript-fil vil vi først få rullegardinlisten, og etikettelementet ved å passere sine respektive ID-er "plukke ut”Og“indeks”I dokumentet.getElementById () -metode. Deretter påkaller “AddEventListener ()”Metode og passere“endring”Hendelse og funksjonen som argumenter. Dette vil fungere på en slik måte at når et alternativ for rullegardinmenyen er valgt, vises indeksen som innholdet i den ekstra etiketten:

const selectOption = dokument.getElementById ('Select');
const opsjonIndex = dokument.getElementById ('indeks');
SELECTOPTION.AddEventListener ('endring', () =>
const index = SelectOption.SelectedIndex;
OptionIndex.textContent = 'Indeksen for det valgte alternativet er: $ index';
);

Det kan sees at indeksen mot det valgte alternativet vises med hell:

Eksempel 2: Få indeksen for valgt alternativ ved hjelp av SelectedIndex -egenskap med OnClick -arrangement

Her oppretter vi to knapper, en for å fjerne markeringen av alternativene og den andre for å vise indeks som vil utløse “Fjern markering ()", og "GetIndexOfSelectedOption ()”Funksjoner, henholdsvis:

Vis indeks
Fjern markering

I JavaScript -filen definerer for det første “GetIndexOfSelectedOption ()”Funksjon som vil skrive ut indeksen mot valgt alternativ ved å hente rullegardinlisteelementet ved hjelp av dokumentet.getElementById () -metode og deretter få tilgang til det valgte alternativets indeks ved å bruke “SelectedIndex”Eiendom:

funksjon getIndexOfSelectedOption ()
var selectOption = dokument.getElementById ('Select').SelectedIndex;
var opsjonIndex = dokument.getElementById ("indeks");
OptionIndex.textContent = 'Indeksen for det valgte alternativet er: $ SELECTOPTION';

I Deselge () -funksjonen vil vi sette verdien “-1”Av rullegardinmenyen. Som et resultat blir alternativet utvalgt:

Funksjonsavlevering ()
dokument.getElementById ("Select").SelectedIndex = "-1";

Klikk på “Vis indeks”-Knappen vil vise indeksen for det valgte alternativet. I kontrast til "Fjern markering”Knappen vil fjerne markeringen av det valgte alternativet:

Vi har dekket alle detaljene relatert til JavaScript SelectedIndex -egenskapen.

Konklusjon

“SelectedIndex”Eiendom brukes til å bestemme det valgte alternativets indeks i en HTML-rullegardinliste opprettet ved hjelp av taggen med taggen. Det gir et tall som en utgang som representerer indeksen for alternativet som er valgt i rullegardinmenyen. Mer spesifikt starter indeksen for rullegardinlisten på null, og den returnerer -1 hvis ikke noe alternativ er valgt. I denne opplæringen har vi diskutert JavaScript SelectedIndex -egenskapen.