Własność SelectedIndex w JavaScript

Podczas opracowywania strony internetowej może istnieć sytuacja, w której musisz uzyskać indeks wybranej opcji z dodanego menu rozwijanego. Czy nie masz pojęcia, jak to zrobić? Bez obaw! Aby poradzić sobie z taką sytuacją, JavaScript oferuje atrybut o nazwie „wybraneIndex„To służy do uzyskania indeksu wybranej opcji z listy rozwijanej.

W tym samouczku wyjaśni właściwość SelectedIndex i jej użycie w JavaScript.

Czym jest właściwość wybrana w JavaScript?

„„wybraneIndex”Czy właściwość JavaScript wykorzystywana do ustawiania lub zwracania indeksu wybranej opcji na dodanej liście rozwijanej. Wyświetla liczbę reprezentującą indeks opcji wybranej w menu rozwijanym HTML. Mówiąc dokładniej, indeks listy rozwijanej zaczyna się od zera i zwraca -1, jeśli nie zostanie wybrana opcja.

Składnia

Postępuj zgodnie z poniżej podaną składnią, aby użyć właściwości SelectedIndex:

SelectObject.wybraneIndex

Tutaj, "SelectObject”To opcja wybierana z menu rozwijanego, a właściwość SelectedIndex pobiera swój indeks.

Przykład 1: Pobierz indeks wybranej opcji przy użyciu właściwości SelectedIndex za pomocą metody addEventListener ()

Najpierw utworzymy listę rozwijaną za pomocą „” tag and specify its option using the “”Tagi. Następnie dodaj etykietę, która wyświetli indeks wybranej opcji:

Wybierz opcję i uzyskaj indeks wybranej opcji

C
C++
Html
CSS
Pyton
Jawa
JavaScript

W pliku JavaScript najpierw otrzymamy listę rozwijaną i element etykiety, przekazując ich odpowiednie identyfikatory ”wybierać" I "indeks”W dokumencie.metoda getelementById (). Następnie przywołaj „„addEventListener ()„Metoda i przejdź”zmiana„Wydarzenie i funkcja jako argumenty. Będzie to działać w taki sposób, aby po wybraniu opcji menu rozwijanego jego indeks zostanie wyświetlony jako zawartość dodanej etykiety:

const SelectOption = Dokument.getElementById („Wybierz”);
const optionindex = dokument.getElementById („indeks”);
Wybierz opcję.addEventListener („zmiana”, () =>
indeks const = selectOption.selectedIndex;
opcjaindex.TextContent = 'indeks wybranej opcji to: $ index';
);

Można zauważyć, że indeks w stosunku do wybranej opcji jest pomyślnie wyświetlany:

Przykład 2: Uzyskaj indeks wybranej opcji za pomocą właściwości SelectedIndex z zdarzeniem onClick

Tutaj utworzymy dwa przyciski, jeden do odznaczania opcji, a drugi do wyświetlania indeksu, który wywoła „DESELECT ()”I„ „getIndexofselectedOption ()”Funkcje odpowiednio:

Pokaż indeks
DESELEKT

W pliku JavaScript, po pierwsze, zdefiniuj „getIndexofselectedOption ()”Funkcja, która wydrukuje indeks w stosunku do wybranej opcji, pobierając jego rozwijaną listę za pomocą dokumentu.metoda getelementById (), a następnie dostęp do indeksu wybranej opcji za pomocą „wybraneIndex" nieruchomość:

funkcja getIndexofselectedOption ()
var selectoption = dokument.getElementById („Wybierz”).selectedIndex;
var optionindex = dokument.getElementById („indeks”);
opcjaindex.TextContent = 'indeks wybranej opcji to: $ selectOption';

W funkcji DESELECT () ustawimy wartość „-1”Z menu rozwijanego. W rezultacie opcja zostaje zróżnicowana:

funkcja denect ()
dokument.getElementById („Wybierz”).selectedIndex = "-1";

Kliknięcie „Pokaż indeks”Przycisk wyświetli indeks wybranej opcji. Natomiast „DESELEKT”Przycisk zabierze wybraną opcję:

Omówiliśmy wszystkie szczegóły związane z właściwością JavaScript SelectedIndex.

Wniosek

„„wybraneIndex„Właściwość służy do określenia indeksu wybranej opcji na liście rozwijanej HTML utworzonej za pomocą znacznika za pomocą znacznika. Podaje liczbę jako wyjście, które reprezentuje indeks opcji wybranej w menu rozwijanym. Mówiąc dokładniej, indeks listy rozwijanej zaczyna się od zera i zwraca -1, jeśli nie zostanie wybrana opcja. W tym samouczku omówiliśmy właściwość JavaScript SelectedIndex.