Comment récupérer de manière fiable les options sélectionnées dans une liste déroulante à l'aide de jQuery ?

Récupération de l'option sélectionnée à partir d'une liste déroulante à l'aide de jQuery

Lorsque vous travaillez avec des menus déroulants, il est important de récupérer l'option sélectionnée avec précision. Bien que $("#idquot;).val() soit couramment utilisé à cette fin, il peut renvoyer des résultats inattendus dans des scénarios spécifiques.

Problème :

Dans Dans certains cas, l'utilisation de $("#id").val() peut ne pas renvoyer la valeur de l'option sélectionnée, en particulier lorsque la liste déroulante a un attribut id attribué. Considérons l'exemple de code HTML suivant :

<label for="name">Name</label>
<input type="text" name="name">

Dans ce scénario, l'utilisation de $('#aioConceptName').val() renverrait une chaîne vide.

Solution :

Pour récupérer avec précision l'option sélectionnée dans une liste déroulante, nous devons utiliser une approche légèrement différente. Selon nos besoins, nous pouvons obtenir soit le texte soit la valeur sélectionnée.

Récupération du texte sélectionné :

Pour obtenir le texte de l'option sélectionnée, nous pouvons utiliser le code suivant :

var conceptName = $('#aioConceptName').find(":selected").text();

Récupération de la valeur sélectionnée :

Pour obtenir la valeur de l'option sélectionnée, nous utilisons un code légèrement différent :

var conceptName = $('#aioConceptName').find(":selected").val();

La raison pour laquelle val() ne fonctionne pas dans ce scénario est que cliquer sur une option ne modifie pas la valeur de la liste déroulante elle-même . Au lieu de cela, il ajoute la propriété :selected à l'option sélectionnée, qui est un élément enfant de la liste déroulante. Par conséquent, nous devons utiliser find(":selected") pour sélectionner l'option spécifique et récupérer son texte ou sa valeur en conséquence.

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!