jQuery-paramétrage de la valeur sélectionnée d'un contrôle select via sa description textuelle

j'ai un contrôle select, et dans une variable javascript j'ai une chaîne de texte.

en utilisant jQuery je veux définir l'élément sélectionné du contrôle select pour être l'élément avec la description du texte que j'ai (par opposition à la valeur, que je n'ai pas).

je sais que le définir par valeur est assez trivial. par exemple

$("#my-select").val(myVal);

mais je suis un peu perplexe sur le fait de le faire via la description du texte. Je suppose qu'il doit y avoir un moyen de obtenir la valeur de la description de texte, mais mon cerveau est trop vendredi après-midi-ed pour être en mesure de résoudre.

510
demandé sur Dan Atkinson 2009-01-30 19:12:17

19 réponses

compte tenu de ce HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Sélectionner par description pour jQuery v1.6+:

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

Sélectionner par description pour les versions de jQuery inférieures à 1,6 et supérieures ou égales à 1,4 : https://stackoverflow.com/a/3644500/31532

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

noter que bien que cette approche fonctionnera dans les versions qui sont au-dessus de 1.6 mais moins que 1.9, il est déprécié depuis 1.6. ne fonctionne pas en jQuery 1.9+.

sélectionner par description pour les versions précédentes:

val() devrait traiter les deux cas. N'êtes-vous pas le voir?

par exemple:

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
735
répondu Crescent Fresh 2017-05-23 12:34:53

je n'ai pas testé, mais cela pourrait fonctionner pour vous.

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });
136
répondu spoulson 2009-01-30 16:22:59

essayez ceci...pour sélectionner l'option avec le texte myText

$("#my-Select option[text=" + myText +"]").attr("selected","selected");
89
répondu Jay Corbett 2015-02-04 02:09:00

je le fais de cette façon (jquery 1.9.1)

$("#my-select").val("Dutch").change();

Remarque: n'oubliez pas le changement(), j'ai dû chercher pour longtemps, parce que :)

31
répondu ErazerBrecht 2016-07-21 08:59:39
$("#myselect option:contains('YourTextHere')").val();

retournera la valeur de la première option contenant votre description textuelle. Testé et fonctionne.

19
répondu Russ Cam 2009-01-30 16:45:05

pour éviter toutes les complications de la version jQuery, je recommande honnêtement d'utiliser l'une de ces fonctions javascript très simple...

function setSelectByValue(eID,val)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].value==val) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

function setSelectByText(eID,text)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].text==text) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}
15
répondu Dave 2013-05-08 15:49:51

je sais que c'est un vieux post, mais je n'ai pas pu le faire sélectionner par texte en utilisant jQuery 1.10.3 et les solutions ci-dessus. J'ai fini par utiliser le code suivant (variation de la solution de spoulson):

      var textToSelect = "Hello World";

      $("#myDropDown option").each(function (a, b) {
            if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
        });

J'espère que ça aidera quelqu'un.

9
répondu Losbear 2013-10-02 13:54:57

Cette ligne de travail:

$("#myDropDown option:contains(myText)").attr('selected', true);
9
répondu Diego Unanue 2014-07-03 05:40:16
 $("#Test").find("option:contains('two')").each(function(){
     if( $(this).text() == 'two' ) {
        $(this).attr("selected","selected");
     }
 });

l'instruction if fait une correspondance exacte avec "deux" et "deux trois" ne correspondra pas

7
répondu aWebDeveloper 2011-07-07 13:14:29

la façon la plus facile avec 1.7+ est:

$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); 

1.9+

$("#myDropDown option:text=" + myText +"").prop("selected", "selected"); 

testé et fonctionne.

5
répondu RParker 2015-01-27 12:21:42

regardez le jQuery selectedbox plugin

selectOptions(value[, clear]): 

sélectionnez options by value, en utilisant une chaîne de caractères comme paramètre $("#myselect2").selectOptions("Value 1"); , ou une expression régulière $("#myselect2").selectOptions(/^val/i); .

vous pouvez également effacer les options déjà sélectionnées: $("#myselect2").selectOptions("Value 2", true);

4
répondu Vitor Silva 2012-02-03 14:39:35

sur une note. Ma valeur sélectionnée n'était pas définie. Et j'ai eu de recherche sur le net. En fait, j'avais pour sélectionner une valeur après l'appel d'un service web, parce que je recevais des données.

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected'); 
$("#SelectMonth").selectmenu('refresh', true);

donc le rafraîchissement du sélecteur était la seule chose qui me manquait.

3
répondu Ammar Bukhari 2013-06-01 07:33:25

j'ai trouvé qu'en utilisant attr vous finiriez avec plusieurs options sélectionnées quand vous ne vouliez pas - la solution est d'utiliser prop :

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

3
répondu Chris Edwards 2013-06-17 11:59:21

j'ai eu un problème avec les exemples ci-dessus, et le problème a été causé par le fait que mes valeurs de boîte de sélection sont pré-remplies avec des chaînes de longueur fixe de 6 caractères, mais le paramètre étant passé dans n'était pas la longueur fixe.

j'ai une fonction rpad qui va droit pad une corde, à la longueur spécifiée, et avec le caractère spécifié. Donc, après avoir rembourré le paramètre ça marche.

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
} 
1
répondu Keith 2012-01-18 13:39:38
 $('#theYear').on('change', function () {
 FY = $(this).find('option:selected').text();
 $('#theFolders').each(function () {
     $('option:not(:contains(' + FY + '))', this).hide();
 });
 $('#theFolders').val(0);
});

$('#theYear').on('mousedown', function () {
 $('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});
1
répondu tomjm 2014-09-16 14:22:24

ici, c'est très simple. plz utiliser

$("#free").val("y").change();
1
répondu Pankaj Chauhan 2017-09-07 04:34:31

obtenir les enfants de la boîte de sélection; boucle à travers eux; lorsque vous avez trouvé celui que vous voulez, définissez-le comme l'option sélectionnée; retour false pour arrêter la boucle.

0
répondu geowa4 2009-01-30 16:23:15

accepté Cette réponse ne semble pas correcte, tandis que .val ('newValue') est correct pour la fonction, essayer de récupérer un select par son nom ne fonctionne pas pour moi, j'ai dû utiliser l'id et le nom de classe pour obtenir mon élément

0
répondu Sam Alexander 2015-04-22 15:48:31

est une option facile. Il suffit de définir votre option de liste puis de définir son texte comme valeur sélectionnée:

$("#ddlScheduleFrequency option").selected(text("Select One..."));
0
répondu DominionDave 2016-06-01 13:28:30