De quel sélecteur ai-je besoin pour sélectionner une option par son texte?

207

Je dois vérifier si un <select> a une option dont le texte est égal à une valeur spécifique.

Par exemple, s'il y a un <option value="123">abc</option>, je rechercherais "abc".

Existe-t-il un sélecteur pour ce faire?

Je cherche quelque chose de similaire à $('#select option[value="123"]');mais pour le texte.

Hailwood
la source
Hmm ... la hasréponse dans SLaks est utile, mais le point dans la réponse Floyds est également bon ... Je ne sais pas quoi accepter.
Hailwood
sont-ils également sensibles à la casse? (Je recherche une insensibilité à la casse et peut toujours simplement convertir en baisse
Hailwood
1
J'utilise la fonction de base JavaScript .toLowerCase () et compare, si une insensibilité à la casse est requise. Aussi, acceptez comme réponse celle qui est la plus utile pour votre question posée. :)
Hari Pachuveetil
cela ne fonctionne pas pour une liste déroulante ayant une API multisélection ?? J'ai essayé toutes les solutions possibles sans chance. J'utilise l'API dropdowm multiselect d'eric hynd. Quelqu'un peut-il résoudre ce problème?
Chaitanya Chandurkar

Réponses:

320

Cela pourrait aider:

$('#test').find('option[text="B"]').val();

Violon de démonstration

Cela vous donnerait l'option avec du texte Bet non pas ceux qui contiennent du texte B. J'espère que cela t'aides

Pour les versions récentes de jQuery, ce qui précède ne fonctionne pas. Comme commenté par Quandary ci-dessous, c'est ce qui fonctionne pour jQuery 1.9.1:

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

Violon mis à jour

Hari Pachuveetil
la source
1
cela ne fonctionne pas avec les dernières versions de jquery (si vous supprimez 'value =' de <option>)
KevinDeus
27
@KevinDeus: Pourquoi le downvote !? La réponse était alors pour la version de jQuery!
Hari Pachuveetil
11
Utilisez plutôt $ ('# option de test'). Filter (function () {return $ (this) .html () == "B";}). Val ();
Stefan Steiger
84
@Quandary Pourtant, ce n'est pas une raison valable de voter contre la réponse lorsqu'un bref commentaire suffira. Ou vous attendez-vous à ce qu'il reteste toutes ses réponses à chaque nouvelle version de jQuery?
WynandB
2
Je pense que le downvote est dû au fait que l'exemple ci-dessus trouve simplement la valeur sélectionnée et ne définit pas la valeur sélectionnée.
nivs1978
133

Vous pouvez utiliser le :contains()sélecteur pour sélectionner des éléments contenant du texte spécifique.
Par exemple:

$('#mySelect option:contains(abc)')

Pour vérifier si un <select>élément donné a une telle option, utilisez la .has()méthode :

if (mySelect.has('option:contains(abc)').length)

Pour trouver tous les <select>s contenant une telle option, utilisez le :has()sélecteur :

$('select:has(option:contains(abc))')
SLaks
la source
3
:containsn'est pas définitif maintenant, n'est-ce pas?
Hari Pachuveetil
Quel est le problème exactement avec contient?
Ogier Schelvis
comment feriez-vous cela avec seulement les options sélectionnées?
toddmo
Cela ne prend-il pas également une option avec 123abcdef?
Teepeemm
@Teepeemm Oui, c'est la différence entre les deux premières réponses. Le haut vérifie uniquement renvoie l'option avec uniquement le texte spécifique, celui-ci renvoie l'option qui contient, mais pas seulement, ce texte spécifique. Par coïncidence, c'est ce dont j'ai réellement besoin en ce moment, donc je suis très heureux de l'avoir posté.
Lee A.
30

Aucune des suggestions précédentes n'a fonctionné pour moi dans jQuery 1.7.2 car j'essaie de définir l'index sélectionné de la liste en fonction de la valeur d'une zone de texte, et certaines valeurs de texte sont contenues dans plusieurs options. J'ai fini par utiliser ce qui suit:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});
Dr. C. Hilarius
la source
1
Je pense que c'est la meilleure réponse car elle renvoie en fait les bons résultats. Mais je ne peux pas m'empêcher de penser qu'omettre containscomplètement peut en fait accélérer les choses.
styfle
Cela a fonctionné pour moi, mais dans mon scénario, je pouvais cliquer plusieurs fois sur modifier sur une grille, donc j'ai dû supprimer l'attribut sélectionné lorsqu'il n'y avait pas de correspondance, sinon la première option sélectionnée resterait pour les modifications ultérieures. else {$ (this) .attr ('selected', ''); retour faux; }
particulier le
Cette solution a fonctionné pour moi, mais au lieu de définir l'attribut d'option, pour réellement changer le menu de sélection que je devais faire: $(this).parent().val($(this).val()); vous pourriez probablement faire les deux, mais pour moi, définir uniquement le parent a val()fait l'affaire.
billynoah
20

J'ai rencontré le même problème ci-dessous est le code de travail:

$("#test option").filter(function() {
    return $(this).text() =='Ford';
}).prop("selected", true);

Démo: http://jsfiddle.net/YRBrp/83/

Jaydeep Shil
la source
15

Cela a fonctionné pour moi: $("#test").find("option:contains('abc')");

Phillip Dennis
la source
3
Vous devez également expliquer pourquoi cela fonctionne.
Hannes Johansson
@HannesJohansson Ou il devrait au moins expliquer en quoi c'est différent ou ajouter quelque chose de nouveau à la réponse de SLaks qui a presque cinq ans de plus. ; ^)
ruffin
4
N'oubliez pas que vous trouverez également cette option: <option> abcd </option>.
Charles
Merci, c'est tout à fait correct et ce que tout le monde a manqué est d'ajouter .attr ('value'); jusqu'à la fin. C'est le moyen le plus simple d'obtenir la valeur à utiliser de manière dynamique! Le code complet devrait donc ressembler à ceci. $("#testselect").find("option:contains('option-text')").attr('value'); de cette façon, vous pouvez utiliser un événement comme .click()pour modifier un paramètre.
ChrisKsag
12

Il s'agit de la meilleure méthode pour sélectionner du texte dans la liste déroulante.

$("#dropdownid option:contains(your selected text)").attr('selected', true);
sreejesh
la source
3
Comme pour les réponses similaires, cela trouvera une option avec this is your selected text plus more.
Teepeemm
4

J'ai essayé quelques-unes de ces choses jusqu'à ce que j'en ai une qui fonctionne à la fois dans Firefox et IE. C'est ce que j'ai trouvé.

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

une autre façon de l'écrire de manière plus lisible:

var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

Pseudocode:

$("#my-Select").val( getValOfText( myText ) );
user2561852
la source
Est logique avec les dernières versions de jQuery
Fr0zenFyr
À quoi ça sert "#my-Select" + " option"? Pourquoi pas juste "#my-Select option"?
Teepeemm
3

Utiliser suivant

$('#select option:contains(ABC)').val();
Dadaso Zanzane
la source
1
le code que vous avez fourni peut résoudre le problème, mais veuillez ajouter une brève description de la façon dont cela résout le problème. Bienvenue dans Stack Overflow, lecture recommandée Comment répondre .
Dan Beaulieu
3
s'il y a des options: ABC, ABCD, ABCDEF, alors?
hungndv
1

Cela fonctionnera dans jQuery 1.6 (notez les deux-points avant le crochet d'ouverture), mais échoue sur les versions les plus récentes (1.10 à l'époque).

$('#mySelect option:[text=abc]")
Bartosz Firyn
la source
5
Intéressant mais malheureusement cela ne semble pas fonctionner (jQuery 1.10.2).
WynandB
Vous voudriez inclure que quelque chose comme $("#mySelect option").filter(function() { return this.text == "abc"; });fonctionnera avec les dernières versions de jQuery .. Ou probablement d'une autre manière que vous préférez utiliser ..
Fr0zenFyr
1

Pour la version 1.10.2 jquery ci-dessous a fonctionné pour moi

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });
Mir Gulam Sarwar
la source
1

Ce travail pour moi

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');
Carlos Castañeda
la source
0

Cela fonctionne pour moi:

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

La resultvariable renverra l'index de la valeur de texte correspondante. Maintenant, je vais le définir en utilisant son index:

$('#SubjectID').val(result);
Willy David Jr
la source
-1

Soit vous parcourez les options, soit vous placez le même texte dans un autre attribut de l'option et vous sélectionnez avec cela.

dekomote
la source
-1

Cela fonctionnera également.

$ ('# test'). find ("select option: contains ('B')"). filter (": selected");

Tjcool
la source
2
Cela saisira également l'option ABC.
Teepeemm
-1

Comme décrit dans cette réponse , vous pouvez facilement créer votre propre sélecteur pour hasText. Cela vous permet de trouver l'option avec$('#test').find('option:hastText("B")').val();

Voici la méthode hasText que j'ai ajoutée:

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }
wbdarby
la source
-2

Ça marche pour moi

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

Merci pour tous les messages.

jayson.centeno
la source