Sélection de l'option par contenu textuel avec jQuery

Question

Je souhaite définir une zone de liste déroulante en fonction de ce qui a été transmis via une chaîne de requête en utilisant jquery. Comment ajouter l'attribut sélectionné à une option de sorte que la valeur "TEXT" soit égale à un certain paramètre de la chaîne de requête?

$(document).ready(function() { 
     var cat = $.jqURL.get('category'); 
     if (cat != null) { 
      cat = $.URLDecode(cat); 
      var $dd = $('#cbCategory'); 
      var $options = $('option', $dd); 
      $options.each(function() { 
       if ($(this).text() == cat) 
        $(this).select(); // This is where my problem is 
      }); 
     }; 
    }); 

Answer 1

Remplacer ceci:

var cat = $.jqURL.get('category'); 
var $dd = $('#cbCategory'); 
var $options = $('option', $dd); 
$options.each(function() { 
if ($(this).text() == cat) 
    $(this).select(); // This is where my problem is 
}); 

Avec ceci:

$('#cbCategory').val(cat); 

Appel val() sur une liste de sélection sélectionnera automatiquement l'option avec cette valeur, le cas échéant.

Answer 2

Je sais que cette question est trop vieux, mais encore, je pense que cette approche serait plus propre:

cat = $.URLDecode(cat); 
$('#cbCategory option:contains("' + cat + '")').prop('selected', true); 

Dans ce cas, vous n'aurez pas besoin d'aller sur les options entières avec each(). Bien qu'à ce moment, prop() n'existait pas, les anciennes versions de jQuery utilisent attr().

---

MISE À JOUR

Vous devez être certain que lors de l'utilisation contains vous pouvez trouver plusieurs options, en cas de la chaîne à l'intérieur cat correspond à une sous-chaîne d'une option différente de celle que vous souhaitez faire correspondre.

Ensuite, vous devez utiliser:

cat = $.URLDecode(cat); 
$('#cbCategory option') 
    .filter(function(index) { return $(this).text() === cat; }) 
    .prop('selected', true); 

Answer 3

Si vos <option> éléments n'ont pas value attributs, vous pouvez simplement utiliser .val:

$selectElement.val("text_you're_looking_for") 

Cependant, si vos <option> éléments ont des attributs de valeur , ou pourrait faire à l'avenir, alors cela ne fonctionnera pas, car chaque fois que possible .val va sélectionner une option par son attribut value au lieu de par son contenu textuel. Il n'y a pas méthode jQuery intégrée qui choisira une option par son contenu texte si les options ont value attributs, donc nous allons devoir ajouter un nous-mêmes avec un simple plugin:

/* 
    Source: https://stackoverflow.com/a/16887276/1709587 

    Usage instructions: 

    Call 

     jQuery('#mySelectElement').selectOptionWithText('target_text'); 

    to select the <option> element from within #mySelectElement whose text content 
    is 'target_text' (or do nothing if no such <option> element exists). 
*/ 
jQuery.fn.selectOptionWithText = function selectOptionWithText(targetText) { 
    return this.each(function() { 
     var $selectElement, $options, $targetOption; 

     $selectElement = jQuery(this); 
     $options = $selectElement.find('option'); 
     $targetOption = $options.filter(
      function() {return jQuery(this).text() == targetText} 
     ); 

     // We use `.prop` if it's available (which it should be for any jQuery 
     // versions above and including 1.6), and fall back on `.attr` (which 
     // was used for changing DOM properties in pre-1.6) otherwise. 
     if ($targetOption.prop) { 
      $targetOption.prop('selected', true); 
     } 
     else { 
      $targetOption.attr('selected', 'true'); 
     } 
    }); 
} 

comprennent Juste ce plugin quelque part après vous ajoutez jQuery sur la page, puis faites

jQuery('#someSelectElement').selectOptionWithText('Some Target Text'); 

pour sélectionner des options.

La méthode plugin utilise filter pour choisir seulement le option correspondant à la targetText, et le sélectionne en utilisant soit .attr ou .prop, selon la version de jQuery (voir .prop() vs .attr() pour l'explication).

Voici un jsFiddle que vous pouvez utiliser pour jouer avec les trois réponses à cette question, ce qui démontre que celui-ci est le seul à fonctionner de manière fiable: http://jsfiddle.net/3cLm5/1/