Optie selecteren op tekstinhoud met jQuery

Ik wil een vervolgkeuzelijst instellen voor alles wat met jQuery door een querystring is gegaan.

Hoe voeg ik het geselecteerde attribuut toe aan een optie zodat de waarde “TEXT” gelijk is aan een bepaalde parameter uit de queryreeks?

$(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
            });
        };
    });

Antwoord 1, autoriteit 100%

Vervang dit:

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

Hiermee:

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

Bellen val()op een selecte lijst zal automatisch de optie met die waarde selecteren, indien aanwezig.

Antwoord 2, autoriteit 20%

Ik weet dat deze vraag te oud is, maar toch denk ik dat deze aanpak schoner zou zijn:

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

In dit geval hoeft u niet alle opties door te nemen met each().
Hoewel prop()toen nog niet bestond, gebruik je voor oudere versies van jQuery attr().

UPDATE

Je moet er zeker van zijn wanneer je containsgebruikt, omdat je meerdere opties kunt vinden, in het geval dat de tekenreeks in catovereenkomt met een subtekenreeks van een andere optie dan degene die je van plan zijn te matchen.

Gebruik dan:

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

Antwoord 3, autoriteit 12%

Als uw <option>-elementen geen value-kenmerken hebben, kunt u gewoon .val:

$selectElement.val("text_you're_looking_for")

Als uw <option>-elementen echter waardeattributen hebben, of in de toekomst zouden kunnen hebben, dan zal dit niet werken, omdat waar mogelijk .valzal selecteren een optie door zijn valueattribuut in plaats van door zijn tekstinhoud. Er is geen ingebouwde jQuery-methode die een optie selecteert op basis van de tekstinhoud als de opties value-attributen hebben, dus we zullen er zelf een moeten toevoegen met een eenvoudige plug-in:

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

Voeg deze plug-in ergens toe nadat u jQuery aan de pagina heeft toegevoegd, en doe dat dan

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

om opties te selecteren.

De plug-inmethode gebruikt filterom alleen de optiondie overeenkomt met de targetText, en selecteert deze met behulp van .attrof .prop, afhankelijk van de jQuery-versie (zie .prop() vs .attr()voor uitleg).

Hier is een JSFiddle die je kunt gebruiken om te spelen met alle drie de antwoorden op deze vraag, wat aantoont dat dit de enige is die betrouwbaar werkt: http://jsfiddle.net/3cLm5/1/