Chọn tùy chọn theo nội dung văn bản với jQuery

Question 1

Tôi muốn đặt một hộp thả xuống thành bất kỳ thứ gì đã được chuyển qua chuỗi truy vấn bằng cách sử dụng jquery.

Làm cách nào để thêm thuộc tính đã chọn vào một tùy chọn sao cho giá trị "TEXT" bằng một tham số nhất định từ chuỗi truy vấn?

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

Question 2

Thay thế cái này:

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

Với cái này:

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

Gọi val()trên một danh sách đã chọn sẽ tự động chọn tùy chọn có giá trị đó, nếu có.

Question 3

Tôi biết câu hỏi này đã quá cũ, nhưng tôi vẫn nghĩ cách tiếp cận này sẽ rõ ràng hơn:

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

Trong trường hợp này, bạn sẽ không cần phải xem lại toàn bộ các tùy chọn each(). Mặc dù vào thời điểm prop()đó không tồn tại như vậy đối với các phiên bản cũ của jQuery sử dụng attr().

CẬP NHẬT

Bạn phải chắc chắn khi sử dụng containsvì bạn có thể tìm thấy nhiều tùy chọn, trong trường hợp chuỗi bên trong catkhớp với chuỗi con của một tùy chọn khác với chuỗi mà bạn định khớp.

Sau đó, bạn nên sử dụng:

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

Question 4

Nếu các <option>phần tử của bạn không có valuethuộc tính, thì bạn chỉ có thể sử dụng .val:

$selectElement.val("text_you're_looking_for")

Tuy nhiên, nếu các <option>phần tử của bạn có thuộc tính giá trị hoặc có thể có trong tương lai, thì điều này sẽ không hoạt động, vì bất cứ khi nào có thể, .valsẽ chọn một tùy chọn theo valuethuộc tính của nó thay vì theo nội dung văn bản của nó. Không có phương thức jQuery tích hợp nào sẽ chọn một tùy chọn theo nội dung văn bản của nó nếu các tùy chọn có valuethuộc tính, vì vậy chúng tôi sẽ phải tự thêm một tùy chọn bằng một plugin đơn giản:

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

Chỉ cần đưa plugin này vào đâu đó sau khi bạn thêm jQuery vào trang và sau đó thực hiện

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

để chọn các tùy chọn.

Phương thức plugin chỉ sử dụng filterđể chọn ra optiontargetText phù hợp và chọn nó bằng cách sử dụng .attrhoặc .prop, tùy thuộc vào phiên bản jQuery (xem .prop () so với .attr () để giải thích).

Đây là một JSFiddle bạn có thể sử dụng để chơi với cả ba câu trả lời được đưa ra cho câu hỏi này, điều này chứng tỏ rằng câu trả lời này là câu trả lời duy nhất hoạt động đáng tin cậy: http://jsfiddle.net/3cLm5/1/