Maison > interface Web > js tutoriel > Comment récupérer correctement l'option sélectionnée dans une liste déroulante à l'aide de jQuery ?

Comment récupérer correctement l'option sélectionnée dans une liste déroulante à l'aide de jQuery ?

Linda Hamilton
Libérer: 2024-12-02 03:45:14
original
721 Les gens l'ont consulté

How to Correctly Retrieve the Selected Option from a Dropdown using jQuery?

Obtention de l'option sélectionnée dans une liste déroulante avec jQuery

Lorsque vous tentez de récupérer l'option sélectionnée dans une liste déroulante à l'aide du $( de jQuery "#id").val(), vous pouvez rencontrer des scénarios où elle échoue. Un tel cas se produit lorsque l'option sélectionnée a un identifiant autre que la liste déroulante elle-même.

Considérez le code HTML suivant :

<label for="name">Name</label>
<input type="text" name="name">
Copier après la connexion

Dans cet exemple, l'option sélectionnée a l'ID "aioConceptName ". L'utilisation de $("#aioConceptName").val() ne renverra pas la valeur de l'option sélectionnée car elle concerne spécifiquement l'élément déroulant lui-même.

Pour récupérer correctement l'option sélectionnée, vous pouvez utiliser l'approche suivante :

Pour le texte sélectionné :

var conceptName = $('#aioConceptName').find(":selected").text();
Copier après la connexion

Cette ligne de code récupère le contenu textuel du texte sélectionné option.

Pour la valeur sélectionnée :

var conceptName = $('#aioConceptName').find(":selected").val();
Copier après la connexion

Cette ligne de code récupère l'attribut de valeur de l'option sélectionnée.

La raison pour laquelle $ ("#id").val() échoue dans ce scénario car cliquer sur une option ne modifie pas la valeur de la liste déroulante elle-même. Au lieu de cela, il ajoute simplement la propriété :selected à l'option sélectionnée, qui est un élément enfant de la liste déroulante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal