En sélectionnant l'option par le texte contenu avec jQuery

Question

Je veux mettre une boîte déroulante pour tout ce qui a été transmis à travers une chaîne de requête à l'aide de jquery.

Comment puis-je ajouter l'attribut sélectionné d'une option telle que le "TEXTE" de la valeur est égale à une certaine valeur dans 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 ce:

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);

Appelant val() sur une liste de sélection permet de sélectionner 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 l'ensemble des options avec each(). Bien qu'à ce moment prop() n'existe pas, donc pour les anciennes versions de jQuery utiliser attr().

---

Mise à JOUR

Vous devez être certain lors de l'utilisation d' contains parce que vous pouvez trouver de multiples options, dans le cas de la chaîne à l'intérieur d' cat correspond à une sous-chaîne d'une option différente que celle que vous avez l'intention de match.

Ensuite, vous devez utiliser:

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

Answer 3

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

$selectElement.val("text_you're_looking_for")

Toutefois, si votre <option> des éléments ont de la valeur des attributs, ou pourrait le faire à l'avenir, alors cela ne fonctionnera pas, car à chaque fois que possible, .val permettra de sélectionner une option en son value d'attribut et non par son contenu textuel. Il n'y a pas de méthode jQuery qui va sélectionner une option de par son contenu texte si les options ont - value d'attributs, de sorte que nous allons ajouter un nous-mêmes avec un simple plugin:

/*
  Source: http://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');
        }
    });
}

Il suffit d'inclure ce plugin quelque part après l'ajout de jQuery sur la page, et ensuite faire

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

pour sélectionner les options.

Le plugin méthode utilise filter choisir seulement l' option correspondant à la targetText, et sélectionne ce soit en .attr ou .prop, selon la version jQuery (voir .prop() vs .attr() pour plus d'explications).

Voici un JSFiddle vous pouvez utiliser pour jouer avec tous les trois réponses à cette question, ce qui démontre que c'est la seule manière fiable de travail: http://jsfiddle.net/3cLm5/1/