Proprietà SelectedIndex in JavaScript

Durante lo sviluppo di un sito Web, può esserci una situazione in cui è necessario ottenere l'indice dell'opzione selezionata dal menu a discesa aggiunto. Non hai idea di come farlo? Nessun problema! Per gestire una situazione del genere, JavaScript offre un attributo chiamato "SelectedIndex"Viene utilizzato per ottenere l'indice dell'opzione selezionata dall'elenco a discesa.

Questo tutorial spiegherà la proprietà SelectedIndex e il suo utilizzo in JavaScript.

Ciò che è selezionato nella proprietà in javascript?

IL "SelectedIndex"La proprietà JavaScript è utilizzata per l'impostazione o la restituzione dell'indice dell'opzione selezionata nell'elenco a discesa aggiunto. Eme un numero che rappresenta l'indice dell'opzione selezionata nel menu a discesa HTML. Più specificamente, l'indice dell'elenco a discesa inizia a zero e restituisce -1 se non viene scelta alcuna opzione.

Sintassi

Segui la sintassi di seguito per utilizzare la proprietà SelectedIndex:

SelectObject.SelectedIndex

Qui, "SelectObject"È l'opzione selezionata dal menu a discesa e la proprietà SelectedIndex prenderà il suo indice.

Esempio 1: Ottieni l'indice dell'opzione selezionata utilizzando la proprietà SelectedIndex con il metodo addEventListener ()

Innanzitutto, creeremo un elenco a discesa usando ""Tag e specifica la sua opzione utilizzando""Tag. Quindi, aggiungi un'etichetta che visualizzerà l'indice dell'opzione selezionata:

Seleziona l'opzione e ottieni l'indice dell'opzione selezionata

C
C++
Html
CSS
Pitone
Giava
JavaScript

In un file JavaScript, otterremo prima l'elenco a discesa e l'elemento dell'etichetta passando i rispettivi ID "Selezionare" E "indice"Nel documento.metodo getElementById (). Quindi, invoca il "addEventListener ()Metodo "e passa il"modifica"Evento e funzione come argomenti. Questo funzionerà in modo tale che quando viene selezionata un'opzione del menu a discesa, il suo indice verrà visualizzato come contenuto dell'etichetta aggiunta:

const selectOption = Documento.getElementById ('Select');
const optionindex = documento.getElementById ('indice');
selezionare l'opzione.addEventListener ('Change', () =>
const index = selectoption.selectedIndex;
optionindex.textContent = 'L'indice dell'opzione selezionata è: $ indice';
);

Si può vedere che l'indice contro l'opzione selezionata viene visualizzato correttamente:

Esempio 2: Ottieni l'indice dell'opzione selezionata utilizzando la proprietà SelectedIndex con evento OnClick

Qui creeremo due pulsanti, uno per la deselezione delle opzioni e l'altra per la visualizzazione dell'indice che attiverà il “deselect ()", e il "getIndexOfSelectedOption ()"Funzioni, rispettivamente:

Mostra indice
Deselezionare

Nel file JavaScript, in primo luogo, definisce il "getIndexOfSelectedOption ()"Funzione che stamperà l'indice rispetto all'opzione selezionata prendendolo elemento dell'elenco a discesa utilizzando il suo documento.Metodo getElementById () e quindi accedere all'indice dell'opzione selezionata usando "SelectedIndex" proprietà:

funzione getIndexOfSelectedOption ()
var selectoption = documento.getElementById ('Select').selectedIndex;
var optionindex = documento.getElementById ("indice");
optionindex.textContent = 'L'indice dell'opzione selezionata è: $ selectOption';

Nella funzione deselect (), imposteremo il valore "-1"Del menu a discesa. Di conseguenza, l'opzione viene deselezionata:

funzione deselect ()
documento.getElementById ("Seleziona").selectedIndex = "-1";

Clicking su "Mostra indiceIl pulsante visualizzerà l'indice dell'opzione selezionata. Al contrario, il "Deselezionare"Il pulsante deselezionerà l'opzione selezionata:

Abbiamo coperto tutti i dettagli relativi alla proprietà JavaScript SelectedIndex.

Conclusione

IL "SelectedIndex"La proprietà viene utilizzata per determinare l'indice dell'opzione selezionata in un elenco a discesa HTML creato utilizzando il tag con tag. Fornisce un numero come output che rappresenta l'indice dell'opzione selezionata nel menu a discesa. Più specificamente, l'indice dell'elenco a discesa inizia a zero e restituisce -1 se non viene scelta alcuna opzione. In questo tutorial, abbiamo discusso della proprietà JavaScript SelectedIndex.