Выбор варианта по текстовому содержимому с помощью jQuery

Question

Я хочу установить в раскрывающемся списке все, что было передано через строку запроса с использованием jquery.

Как добавить выбранный атрибут к опции, чтобы значение "TEXT" равнялось определенному параметру из строки запроса?

 $(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

Заменить это:

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

С этим:

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

Вызов val() в списке выбора автоматически выберет параметр с этим значением, если оно есть.

Answer 2

Я знаю, что этот вопрос слишком старый, но все же, я думаю, что этот подход будет чище:

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

В этом случае вам не нужно просматривать все параметры с помощью each(). Хотя к тому времени prop() не существовало, поэтому для более старых версий jQuery используйте attr().

---

UPDATE

Вы должны быть уверены при использовании contains, потому что вы можете найти несколько вариантов, в случае если строка внутри cat соответствует подстроке другой опции, отличной от той, которую вы намереваетесь найти.

Тогда вы должны использовать:

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

Answer 3

Если ваши <option> элементы не имеют атрибутов value, тогда вы можете просто использовать .val:

$selectElement.val("text_you're_looking_for")

Однако, если ваши элементы <option> имеют атрибуты значения или могут появиться в будущем, это не сработает, потому что, когда это возможно, .val будет выбирать опцию по атрибуту value, а не по текстовому содержимому. , Нет встроенного метода jQuery, который бы выбирал опцию по ее текстовому содержимому, если у опций есть атрибуты value, поэтому нам придется добавить его самостоятельно с помощью простого плагина:

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

Просто включите этот плагин где-нибудь после добавления jQuery на страницу, а затем выполните

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

для выбора параметров.

Метод плагина использует filter, чтобы выбрать только option, соответствующий targetText, и выбирает его, используя .attr или .prop, в зависимости от версии jQuery (см. .prop () против .attr () для объяснения).

Вот JSFiddle, который вы можете использовать, чтобы поиграть со всеми тремя ответами на этот вопрос, что показывает, что этот единственный, который надежно работает: http://jsfiddle.net/3cLm5/1/