jQuery - définir la valeur sélectionnée d'un contrôle de sélection via sa description textuelle

Question

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

À l'aide de jQuery, je souhaite que l'élément sélectionné du contrôle de sélection soit l'élément contenant la description textuelle dont je dispose (par opposition à la valeur, que je n'ai pas).

Je sais que la définition de la valeur est assez triviale, par exemple.

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

Mais j'ai un peu de mal à le faire via la description du texte. Je suppose qu'il doit y avoir un moyen d'extraire la valeur de la description textuelle, mais mon cerveau est trop fatigué pour y parvenir.

Answer 1

Sélection 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 de 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 fonctionne dans les versions supérieures à 1.6 et inférieures à 1.9, mais qu'elle est obsolète depuis la version 1.6. Elle ne fonctionnera pas dans jQuery 1.9+.

---

Versions précédentes

val() devrait traiter 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>

Answer 2

Je ne l'ai pas testé, mais cela pourrait vous convenir.

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

Answer 3

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

$("#my-Select option[text=" + myText +"]").prop("selected", true);

Answer 4

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

renvoie la valeur de la première option contenant votre texte de description. Testé et fonctionne.

Answer 5

Pour éviter toutes les complications liées à la version de jQuery, je recommande honnêtement 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;
}