web-dev-qa-db-fra.com

jQuery - définition de la valeur sélectionnée d'une commande de sélection via sa description textuelle

J'ai un contrôle de sélection, et dans une variable javascript, j'ai une chaîne de texte.

Avec jQuery, je souhaite définir l’élément sélectionné du contrôle de sélection comme étant l’élément avec la description textuelle que j’ai (par opposition à la valeur que je n’ai pas).

Je sais que le réglage par valeur est assez trivial. par exemple.

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

Mais je suis un peu surpris de le faire via la description textuelle. J'imagine qu'il doit y avoir un moyen de tirer profit de la description textuelle, mais mon cerveau est trop dur vendredi après-midi pour pouvoir y arriver.

javascriptjquery
521
DanSingerman

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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

versions jQuery inférieures à 1.6 et supérieures ou égales à 1.4

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

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

Notez que cette approche fonctionnera dans les versions supérieures à 1.6 mais inférieures à 1.9, mais elle est déconseillée depuis la version 1.6. Il ne fonctionnera pas dans jQuery 1.9+.

Versions précédentes

val() devrait gérer les deux cas.

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

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

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

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });
138
spoulson

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

$("#my-Select option[text=" + myText +"]").attr("selected","selected");
90
Jay Corbett

Je le fais de cette façon (jQuery 1.9.1)

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

Note: n'oubliez pas le changement (), j'ai dû chercher trop longtemps à cause de ça :)

39
ErazerBrecht
$("#myselect option:contains('YourTextHere')").val();

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

21
Russ Cam

Pour éviter toutes les complications de la version jQuery, je vous recommande vivement d'utiliser l'une de ces fonctions javascript très simples ...

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
Dave

Cette ligne a fonctionné:

$("#myDropDown option:contains(myText)").attr('selected', true);
10
Diego Unanue

Je sais que ceci est un ancien message, mais je ne pouvais pas le faire sélectionner par texte à l'aide de jQuery 1.10.3 et des 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 aide quelqu'un.

9
Losbear
 $("#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 seront pas appariés

7
aWebDeveloper

Le moyen le plus simple avec 1.7+ est:

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

1.9+

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

Testé et fonctionne.

6
RParker

jetez un oeil au plugin jquery selectedbox

selectOptions(value[, clear]):

Sélectionnez les options par valeur en utilisant une chaîne 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
Vitor Silva

Juste sur une note de côté. Ma valeur sélectionnée n'était pas définie. Et j'avais des recherches partout sur le net. En fait, je devais sélectionner une valeur après un rappel d'un service Web, car j'obtenais des données.

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

Ainsi, l'actualisation du sélecteur était la seule chose qui me manquait.

3
Ammar Bukhari

Voici un moyen très simple. plz l'utiliser

$("#free").val("y").change();
3
Pankaj Chauhan

J'ai trouvé qu'en utilisant attr on se retrouvait avec plusieurs options sélectionnées quand on ne voulait pas - la solution est d'utiliser prop:

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

2
Chris Edwards
 $('#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
tomjm

Les exemples ci-dessus me posaient un problème. Le problème était dû au fait que mes valeurs de zone de sélection étaient préremplies avec des chaînes de longueur fixe de 6 caractères, mais que le paramètre en cours de transmission n'était pas de longueur fixe.

J'ai une fonction rpad qui remplit à droite une chaîne, à la longueur spécifiée et avec le caractère spécifié. Donc, après avoir complété le paramètre, cela fonctionne.

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


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
}
1
Keith

Heres 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
DominionDave

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

0
Sam Alexander

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

0
geowa4