Maison > interface Web > js tutoriel > Comment sélectionner une option dans une liste déroulante par description textuelle avec jQuery ?

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

DDD
Libérer: 2024-11-03 12:53:03
original
1065 Les gens l'ont consulté

How to Select an Option in a Dropdown by Text Description with jQuery?

Comment définir la valeur sélectionnée dans un contrôle de sélection à l'aide d'une description textuelle avec jQuery

Lorsque vous travaillez avec des contrôles de sélection dans votre application Web, vous pouvez rencontrer situations dans lesquelles vous devez définir l'élément sélectionné en fonction de sa description textuelle plutôt que de sa valeur. Bien que la définition de la valeur soit simple à l'aide de la méthode val() de jQuery, la sélection par description textuelle nécessite une approche différente.

Dans les versions 1.6 et supérieures de jQuery, vous pouvez utiliser l'extrait de code suivant pour y parvenir :

<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>
Copier après la connexion

Ce code sélectionne toutes les options du contrôle de sélection et les filtre en fonction de leur texte. La fonction de filtre compare le texte de chaque option à la valeur text1 fournie. Une fois l'option correspondante trouvée, sa propriété sélectionnée est définie sur true.

Par exemple, considérons le contrôle de sélection suivant :

<code class="html"><select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select></code>
Copier après la connexion

Si vous souhaitez sélectionner l'option avec le texte " Deux" en utilisant jQuery, vous pouvez utiliser l'extrait de code ci-dessus avec le code suivant :

<code class="html"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></code>
Copier après la connexion

Cela entraînera la sélection de l'option "Deux" dans 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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal