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()。

更新

使用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属性选择一个选项而不是其文本内容。如果选项具有value属性，则没有内置的jQuery方法可以通过文本内容选择选项，因此我们必须使用简单的插件添加一个选项：

/*
  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仅挑选与targetText匹配的option，并使用.attr或.prop选择它，具体取决于jQuery版本（请参阅{ {3}}以获得解释）。

这是一个JSFiddle，您可以使用它来回答这个问题的所有三个答案，这表明这个答案是唯一可靠的工作：.prop() vs .attr()

使用jQuery通过文本内容选择选项

3 个答案: