Câu hỏi Chọn tùy chọn theo nội dung văn bản với jQuery


Tôi muốn thiết lập một hộp thả xuống bất cứ điều gì đã được chuyển qua một 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
            });
        };
    });

76
2018-06-17 21:59


gốc


có thể trùng lặp jQuery - thiết lập giá trị được chọn của một điều khiển chọn qua mô tả văn bản của nó - Mark Amery


Các câu trả lời:


Thay thế 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);

Đang gọi val() trên danh sách chọn sẽ tự động chọn tùy chọn với giá trị đó, nếu có.


171
2018-06-17 22:01



không thể làm nhiều lựa chọn với phương pháp này? - Akhil Dev
Phương thức này không kích hoạt các sự kiện trên phần tử $ ('# cbCategory'). - Jānis Gruzis
Câu trả lời này đã lỗi thời. Kể từ jQuery 1.4, .val sẽ chỉ chọn các tùy chọn theo nội dung văn bản của chúng nếu chúng không có value thuộc tính. Do đó trong trường hợp các phần tử tùy chọn có thuộc tính giá trị và chúng không khớp với nội dung văn bản của chúng, câu trả lời được cung cấp ở đây sẽ không hoạt động. - Mark Amery


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ẽ sạch 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 đi qua toàn bộ các tùy chọn với 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ũ hơn của việc sử dụng jQuery attr().


CẬP NHẬT

Bạn phải chắc chắn khi sử dụng contains bởi vì bạn có thể tìm thấy nhiều tùy chọn, trong trường hợp chuỗi bên trong cat khớp với chuỗi con của một tùy chọn khác với tùy chọn bạn dự định so 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);

32
2017-11-30 11:43



Cảm ơn bạn đã chia sẻ và cập nhật nội dung! - Eric Herlitz


Nếu là của bạn <option> các yếu tố không có value các thuộc tính, sau đó bạn chỉ có thể sử dụng .val:

$selectElement.val("text_you're_looking_for")

Tuy nhiên, nếu bạn <option> các phần tử có thuộc tính giá trị hoặc có thể làm trong tương lai, sau đó điều này sẽ không hoạt động, bởi vì bất cứ khi nào có thể .val sẽ chọn một tùy chọn theo value thuộc tính thay vì bằng nội dung văn bả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ó value các thuộc tính, vì vậy chúng ta sẽ phải thêm một chính mình 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 bao gồm plugin này ở đâ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 sử dụng filter để chỉ chọn ra option khớp với targetText và chọn nó bằng cách sử dụng .attr hoặc là .prop, tùy thuộc vào phiên bản jQuery (xem .prop () so với .attr () để giải thích).

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


20
2018-06-02 21:01