Comment connaître l'index de la valeur sélectionnée dans la liste déroulante en javascript

JavaScript est un langage de script largement utilisé dans le développement Web. Parmi eux, la zone déroulante (liste déroulante) est un contrôle couramment utilisé dans le développement de pages, qui permet aux utilisateurs de sélectionner une valeur parmi une série d'options prédéfinies. En JavaScript, nous devons généralement traiter la valeur sélectionnée par l'utilisateur, nous devons donc connaître l'index de la valeur sélectionnée dans la liste déroulante. Cet article présentera en détail comment obtenir l'index de la valeur sélectionnée dans la liste déroulante en JavaScript.

1. Utilisation de base de la liste déroulante

La liste déroulante est définie en HTML avec la balise , et la balise Une simple liste déroulante peut être écrite comme ceci :

Volvo Saab Opel Audi Il y a 4 options dans cette liste déroulante. La valeur et le texte affiché de chaque option sont "volvo", "Volvo", "saab", "Saab". , "opel" respectivement, "Opel", "audi", "Audi". Parmi eux, l'attribut value définit la valeur de l'option. Si l'attribut value n'est pas spécifié, la valeur de l'option par défaut est le texte affiché. L'option sélectionnée par défaut dans la liste déroulante est la première option, « Volvo ».

En JavaScript, vous pouvez obtenir l'élément de la liste déroulante via la méthode getElementById() :

var selectElement = document.getElementById("mySelect"); 2. Récupérez l'index de l'option sélectionnée

Il existe de nombreuses façons d'obtenir l'index de l'option sélectionnée dans le drop -down box Ces méthodes sont présentées ci-dessous.

propriétéselectedIndex La propriété selectedIndex renvoie l'index de l'option sélectionnée. Par défaut, la valeur de l'attribut selectedIndex est 0, qui est la première option. Nous pouvons modifier l'option sélectionnée en modifiant la valeur de l'attribut selectedIndex.

Supposons que nous voulions obtenir l'index de l'option sélectionnée dans la liste déroulante, nous pouvons écrire comme ceci :

var selectElement = document.getElementById("mySelect"); var selectedOptionIndex = selectElement.selectedIndex; attribut value L'attribut value renvoie la valeur de l'option sélectionnée. Nous pouvons obtenir l'index de l'option sélectionnée via l'attribut selectedIndex, puis obtenir la valeur de l'option.

Supposons que nous souhaitions obtenir la valeur et l'index de l'option sélectionnée dans la liste déroulante, nous pouvons écrire comme ceci :

var selectElement = document.getElementById("mySelect"); var selectedOptionIndex = selectElement.selectedIndex; var selectedOptionValue = selectElement.options[selectedOptionIndex].value; collection d'options la collection d'options contient toutes les balises des spécifiques via l'option de collecte d'options, puis obtenez l'index et la valeur de l'option.

Supposons que nous voulions obtenir les valeurs et les index de toutes les options dans la liste déroulante, nous pouvons écrire comme ceci :

var selectElement = document.getElementById("mySelect"); for(var i = 0; i 4. Résumé

En JavaScript, il existe de nombreuses façons d'obtenir l'index du valeur sélectionnée dans la liste déroulante, y compris en utilisant les attributs selectedIndex, les attributs de valeur et les collections d'options. Parmi eux, l'attribut selectedIndex renvoie l'index de l'option sélectionnée, l'attribut value renvoie la valeur de l'option sélectionnée et la collection d'options contient des informations sur toutes les options. Différentes méthodes conviennent à différents types de scénarios d'application, et nous pouvons choisir la méthode appropriée pour implémenter la fonction en fonction de la situation réelle.