Comment sélectionner une option déroulante par sa description textuelle avec jQuery ?

Définition de l'option de liste déroulante sélectionnée par description textuelle avec jQuery

Dans le domaine du développement Web, la sélection d'un élément dans une sélection un contrôle basé sur sa description textuelle apparaît souvent. Bien que définir une option par sa valeur soit simple, trouver la valeur correspondante pour une description textuelle donnée peut être un défi.

Genèse de la requête

Le besoin car cette fonctionnalité provient du cas où une variable JavaScript contient une chaîne de texte, et le but est de sélectionner l'option déroulante dont le texte correspond à cette chaîne. Contrairement à la sélection basée sur les valeurs, qui utilise la syntaxe $("#my-select").val(myVal), cette tâche nécessite une approche plus complexe.

Résoudre l'énigme

Pour les versions 1.6 et supérieures de jQuery, la solution réside dans l'exploitation des méthodes filter() et prop(). La méthode filter() passe au crible toutes les options du contrôle de sélection, en comparant leurs descriptions textuelles à la chaîne souhaitée. L'élément résultant est ensuite ciblé par la méthode prop(), définissant son attribut selected sur true.

Exemple d'implémentation

Considérez un contrôle de sélection avec deux options : « Un » et « Deux ». Le code suivant illustre comment sélectionner l'option avec le texte « Deux » en utilisant l'approche basée sur le texte :

<code class="javascript">var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);</code>

Ce code sélectionne effectivement l'option « Deux » dans la liste déroulante en fonction de son texte. description, même sans connaître sa valeur.

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!