Comment récupérer la valeur sélectionnée dans la liste déroulante JavaScript
En JavaScript, nous rencontrons souvent des pages Web conviviales qui incluent un questionnaire ou un formulaire pour obtenir la valeur des options sélectionnées uniques ou multiples. De plus, tout en traitant une page Web basée sur le quiz, nous voulons informer l'utilisateur de l'état par rapport à la réponse fournie avec une valeur (correcte, mal). Dans de tels cas, la récupération des valeurs sélectionnées de la liste déroulante est très utile pour donner une clarté et gagner du temps à la fin de l'utilisateur.
Cet article vous guidera pour récupérer les valeurs sélectionnées à partir d'une liste déroulante dans JavaScript.
Comment obtenir / récupérer la valeur sélectionnée à partir de la liste déroulante dans JavaScript?
Pour récupérer la valeur sélectionnée à partir de la liste déroulante dans JavaScript, vous pouvez utiliser:
-
- "valeur" propriété.
- "SELECT-INDEX" propriété.
Nous allons maintenant passer par chacune des approches mentionnées une par une!
Méthode 1: obtenir / récupérer la valeur sélectionnée à partir de la liste déroulante dans JavaScript en utilisant la propriété de valeur
Le "valeur»La propriété renvoie l'attribut de valeur d'un champ de texte. Nous utiliserons cette méthode pour obtenir l'option sélectionnée dans une liste déroulante et afficher sa valeur:
Syntaxe
sélectifier.valeur
Ici le "valeur»La propriété renvoie la valeur particulière sélectionnée dans la liste déroulante.
Passons en revue l'exemple suivant pour une meilleure compréhension du concept:
Exemple
Dans cet exemple, nous spécifierons l'ID nommé «sélectionner»Et insérez les valeurs d'option à sélectionner dans la liste déroulante. Ces valeurs d'option seront placées dans le «" Mots clés.
Maintenant, nous inclurons un bouton avec un "sur clic" événement. Cela fonctionnera de telle manière que lorsque le bouton avec valeur "Vérifier l'option"Soyez pressé, la fonction"selectValue ()"Sera déclenché:
Sélectionnez le genre dans la liste déroulante donnée:
La valeur du sexe sélectionné est:
class = "output">
Ensuite, nous déclarerons une fonction nommée «selectValue ()". Ici, nous utiliserons le «document.QuerySelector ()”Méthode pour accéder à l'ID du menu déroulant créé. Après cela, nous obtiendrons la valeur du sexe sélectionné dans la liste déroulante à l'aide du «valeur" propriété. Enfin, le «continent textuel»La propriété renvoie le contenu texte de la valeur sélectionnée et l'afficher:
La sortie de l'implémentation ci-dessus en résultera comme suit:
Méthode 2: Récupérez la valeur sélectionnée à partir de la liste déroulante dans JavaScript à l'aide de la propriété «SelectedIndex»
Le "option»La propriété renvoie une collection de tous les éléments et le« «SELECT-INDEX»La propriété renvoie l'index de l'option sélectionnée dans le«option»Propriété dans une liste déroulante. Nous utiliserons les deux ensemble pour sélectionner une option spécifiée et afficher la valeur de l'option correspondante en accédant à son index.
Syntaxe
sélectionner.Options [Sélectionner.selectedIndex].valeur
La syntaxe fournie ci-dessus aidera à récupérer la valeur de l'option de menu déroulant sélectionné à l'aide de son index.
Regardez l'exemple suivant pour la démonstration:
Exemple
Nous allons maintenant utiliser le même code HTML donné dans l'exemple précédent et apporter quelques modifications dans le code JavaScript. Pour ce faire, nous définirons la fonction "selectValue ()»Et accédez à l'ID attribué du menu déroulant nommé«sélectionner"Avec l'aide du document.Méthode QueySelector (). Après cela, nous utiliserons le «options«Propriété en combinaison avec d'autres propriétés, notamment«SELECT-INDEX”Pour récupérer la valeur de l'option sélectionnée.
Enfin, le «continent textuel”La propriété sera utilisée dans cette méthode pour renvoyer le contenu texte de la valeur sélectionnée et afficher la valeur correspondante:
Sortir
Nous avons fourni les méthodes les plus faciles pour récupérer une valeur sélectionnée de la liste déroulante en JavaScript.
Conclusion
Pour obtenir / récupérer la valeur sélectionnée à partir de la liste déroulante en JavaScript, appliquez le «valeur”Propriété pour obtenir la valeur de l'élément sélectionné dans la liste déroulante et le"option«Propriété avec le«SELECT-INDEX”Propriété pour obtenir l'ensemble d'options et obtenir la valeur de l'option sélectionnée en accédant à l'index de l'option particulière. Cet article a expliqué les méthodes pour obtenir / récupérer les valeurs sélectionnées de la liste déroulante dans JavaScript.