Propriété SelectIndex en JavaScript

Lors du développement d'un site Web, il peut y avoir une situation où vous devez obtenir l'index de l'option sélectionnée dans le menu déroulant ajouté. Avez-vous aucune idée de comment faire ça? Pas de soucis! Pour gérer une telle situation, JavaScript propose un attribut appelé «SELECT-INDEX"Qui est utilisé pour obtenir l'index de l'option sélectionnée dans la liste déroulante.

Ce tutoriel expliquera la propriété SelectedIndex et son utilisation dans JavaScript.

Quelle est la propriété SelectedIndex en javascript?

Le "SELECT-INDEX"La propriété JavaScript est-elle utilisée pour définir ou renvoyer l'index de l'option sélectionnée dans la liste déroulante ajoutée. Il publie un nombre qui représente l'index de l'option sélectionnée dans le menu déroulant HTML. Plus précisément, l'index de la liste déroulante commence à zéro, et il renvoie -1 si aucune option n'est choisie.

Syntaxe

Suivez la syntaxe dirigée ci-dessous pour utiliser la propriété SelectedIndex:

selectObject.SELECT-INDEX

Ici, "selectObject"Est l'option sélectionnée dans le menu déroulant, et la propriété SelectedIndex récupérera son index.

Exemple 1: Obtenez l'index de l'option sélectionnée à l'aide de la propriété SelectedIndex avec AdVEventListener ()

Tout d'abord, nous créerons une liste déroulante en utilisant le «”Tag et spécifiez son option à l'aide du«" Mots clés. Ensuite, ajoutez une étiquette qui affichera l'index de l'option sélectionnée:

Sélectionnez l'option et obtenez l'index de l'option sélectionnée

C
C++
Html
CSS
Python
Java
Javascrip

Dans un fichier JavaScript, nous obtiendrons d'abord la liste déroulante et l'élément d'étiquette en passant leurs ID respectifs "sélectionner" et "indice"Dans le document.Méthode GetElementById (). Ensuite, invoquez le «addEventListener ()«Méthode et passez le«changement”Événement et la fonction comme des arguments. Cela fonctionnera de telle manière que lorsqu'une option du menu déroulant sera sélectionnée, son index sera affiché comme le contenu de l'étiquette ajoutée:

const selectOption = document.getElementById ('select');
const OptionIndex = document.getElementById ('index');
selectOption.addEventListener ('change', () =>
const index = selectOption.selectedIndex;
OptionIndex.textContent = 'L'indice de l'option sélectionnée est: $ index';
);

On peut voir que l'index par rapport à l'option sélectionnée est affiché avec succès:

Exemple 2: Obtenez l'index de l'option sélectionnée à l'aide de la propriété SelectedIndex avec l'événement OnClick

Ici, nous allons créer deux boutons, l'un pour le désélectionner les options et l'autre pour afficher l'index qui déclenchera le «Deselect ()", et le "getIndexofSelectedOption ()»Fonctions, respectivement:

Indice de spectacle
Désélectionner

Dans le fichier JavaScript, tout d'abord, définissez le «getIndexofSelectedOption ()”Fonction qui imprimera l'index contre l'option sélectionnée en le récupérant l'élément de liste déroulante à l'aide de son document.Méthode getElementById () puis accéder à l'index de l'option sélectionnée à l'aide de "SELECT-INDEX" propriété:

function getIndexofSelectedOption ()
var selectOption = document.getElementById ('select').selectedIndex;
var optionIndex = document.getElementById ("index");
OptionIndex.textContent = 'L'indice de l'option sélectionnée est: $ selectOption';

Dans la fonction Deselect (), nous définirons la valeur "-1”Du menu déroulant. En conséquence, l'option est désélectionnée:

fonction Deelect ()
document.getElementById ("SELECT").selectedIndex = "-1";

Cliquez sur le "Indice de spectacle”Le bouton affiche l'index de l'option sélectionnée. En revanche, le «Désélectionner”Le bouton désélectionnera l'option sélectionnée:

Nous avons couvert tous les détails liés à la propriété JavaScript SelectedIndex.

Conclusion

Le "SELECT-INDEX»La propriété est utilisée pour déterminer l'index de l'option sélectionnée dans une liste déroulante HTML créée à l'aide de la balise avec balise. Il donne un nombre en tant que sortie qui représente l'index de l'option sélectionnée dans le menu déroulant. Plus précisément, l'index de la liste déroulante commence à zéro, et il renvoie -1 si aucune option n'est choisie. Dans ce tutoriel, nous avons discuté de la propriété JavaScript SelectedIndex.