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

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

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

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

Ответ 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() в списке выбора автоматически выберет опцию с этим значением, если оно есть.

Ответ 2

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

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

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

ОБНОВЛЕНИЕ

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

Затем вы должны использовать:

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

Ответ 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 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');

чтобы выбрать параметры.

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

Здесь JSFiddle, который вы можете использовать, чтобы играть со всеми тремя ответами, заданными этому вопросу, что демонстрирует, что это единственное, над чем можно надежно работать: < а3 >