Cách hiệu quả nhất để sắp xếp các Tùy chọn của Html Select theo giá trị, trong khi vẫn giữ nguyên mục hiện được chọn là gì?

Tôi có jQuery nhưng tôi không chắc liệu nó có bất kỳ trình trợ giúp sắp xếp tích hợp nào không. Tôi có thể làm cho một mảng 2ngày của từng mục text, valuevà selectedtài sản, nhưng tôi không nghĩ rằng javascript được tích hợp sẵn Array.sort()sẽ làm việc một cách chính xác.

Trích xuất các tùy chọn thành một mảng tạm thời, sắp xếp, sau đó xây dựng lại danh sách:

var my_options = $("#my_select option");
var selected = $("#my_select").val();

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0
})

$("#my_select").empty().append( my_options );
$("#my_select").val(selected);

Tài liệu sắp xếp của Mozilla (cụ thể là so sánh) và trang Thuật toán sắp xếp của Wikipedia có liên quan.

Nếu bạn muốn phân biệt chữ hoa chữ thường, hãy thay thế textbằngtext.toLowerCase()

Hàm sắp xếp hiển thị ở trên minh họa cách sắp xếp. Việc sắp xếp chính xác các ngôn ngữ không phải tiếng Anh có thể phức tạp (xem thuật toán đối chiếu unicode ). Sử dụng localeCompare trong hàm sắp xếp là một giải pháp tốt, ví dụ:

my_options.sort(function(a,b) {
    return a.text.localeCompare(b.text);
});

Đã sửa đổi một chút câu trả lời của Tom ở trên để nó thực sự sửa đổi nội dung của hộp chọn được sắp xếp, thay vì chỉ trả về các phần tử đã được sắp xếp.

$('#your_select_box').sort_select_box();

Hàm jQuery:

$.fn.sort_select_box = function(){
    // Get options from select box
    var my_options = $("#" + this.attr('id') + ' option');
    // sort alphabetically
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    })
   //replace with sorted my_options;
   $(this).empty().append( my_options );

   // clearing any selections
   $("#"+this.attr('id')+" option").attr('selected', false);
}

Tôi vừa gói gọn ý tưởng của Mark trong một hàm jquery

$('#your_select_box').sort_select_box();

Hàm jQuery:

$.fn.sort_select_box = function(){
    var my_options = $("#" + this.attr('id') + ' option');
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    })
   return my_options;
}

Giải pháp mà tôi đã đề cập trong nhận xét của mình cho @Juan Perez

$.fn.sortOptions = function(){
    $(this).each(function(){
        var op = $(this).children("option");
        op.sort(function(a, b) {
            return a.text > b.text ? 1 : -1;
        })
        return $(this).empty().append(op);
    });
}

Sử dụng:

$("select").sortOptions();

Điều này vẫn có thể được cải thiện, nhưng tôi không cần thêm bất kỳ chuông hoặc còi nào nữa :)

Chà, trong IE6, nó dường như sắp xếp trên mục [0] của mảng lồng nhau:

function sortSelect(selectToSort) {
    var arrOptions = [];

    for (var i = 0; i < selectToSort.options.length; i++)  {
        arrOptions[i] = [];
        arrOptions[i][0] = selectToSort.options[i].value;
        arrOptions[i][1] = selectToSort.options[i].text;
        arrOptions[i][2] = selectToSort.options[i].selected;
    }

    arrOptions.sort();

    for (var i = 0; i < selectToSort.options.length; i++)  {
        selectToSort.options[i].value = arrOptions[i][0];
        selectToSort.options[i].text = arrOptions[i][1];
        selectToSort.options[i].selected = arrOptions[i][2];
    }
}

Tôi sẽ xem liệu điều này có hoạt động trên các trình duyệt khác không ...

Chỉnh sửa: nó cũng hoạt động trong Firefox, xin chào!

Có cách nào dễ dàng hơn cách này không? có phương pháp nào đó được tích hợp trong javascript hoặc jQuery sắp xếp các lựa chọn mà tôi đang thiếu không, hay đây là cách tốt nhất?

Có một thẻ jQuery đã đóng cho một loại có thể hoạt động, nhưng không được đưa vào lõi.

jQuery.fn.sort = function() {
  return this.pushStack( [].sort.apply( this, arguments ), []);
};

Được tham chiếu từ chuỗi Google Groups , tôi nghĩ bạn chỉ cần chuyển vào một hàm được sử dụng để sắp xếp, như vậy

function sortSelect(selectToSort) {
    jQuery(selectToSort.options).sort(function(a,b){ 
        return a.value > b.value ? 1 : -1; 
    });
}

Hy vọng nó giúp!

Đây là một giải pháp tốt hơn. Khai báo một hàm toàn cục cho JQuery

$.fn.sortSelect = function() {
    var op = this.children("option");
    op.sort(function(a, b) {
        return a.text > b.text ? 1 : -1;
    })
    return this.empty().append(op);
}

Và gọi hàm từ mã.

$("#my_select").sortSelect();

Array.sort()mặc định chuyển đổi từng phần tử thành một chuỗi và so sánh các giá trị đó. Vì vậy, ["value", "text", "selected"]được sắp xếp như "value, text, selected". Mà có lẽ sẽ hoạt động tốt, hầu hết thời gian.

Nếu bạn muốn sắp xếp theo giá trị một mình hoặc giải thích giá trị dưới dạng số, thì bạn có thể chuyển một hàm so sánh vào sort ():

arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });

Hãy nhớ: nếu bạn muốn sử dụng bộ chọn ngữ cảnh, chỉ cần nối ID sẽ không hoạt động

$.fn.sort_select_box = function(){
    var my_options = $("option", $(this));
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    });
    $(this).empty().append(my_options);
}

// Usando:
$("select#ProdutoFornecedorId", $($context)).sort_select_box();

Hơi muộn nhưng vì những gì đáng giá, tôi đã triển khai một chức năng phức tạp hơn mà bạn có thể đưa vào một cách chung chung. Nó có một số tùy chọn cho đầu ra khác nhau. Nó cũng có thể đệ quy thành <OPTGROUP>các thẻ dựa trên nhãn của chúng.

$.fn.sortSelect = function(options){

    const OPTIONS_DEFAULT = {
        recursive:      true,   // Recurse into <optgroup>
        reverse:        false,  // Reverse order
        useValues:      false,  // Use values instead of text for <option> (<optgruop> is always label based)
        blankFirst:     true,   // Force placeholder <option> with empty value first, ignores reverse
    }

    if (typeof options != "object" || null === options) {
        options = OPTIONS_DEFAULT;
    }

    var sortOptions = function($root, $node, options){

        if ($node.length != 1) {
            return false;
        }

        if ($node[0].tagName != "SELECT" && $node[0].tagName != "OPTGROUP") {
            return false;
        }

        if (options.recursive) {
            $node.children('optgroup').each(function(k, v){
                return sortOptions($root, $(v), options);
            });
        }

        var $options        = $node.children('option, optgroup');
        var $optionsSorted  = $options.sort(function(a, b){

            if (options.blankFirst) {
                if (a.tagName == "OPTION" && a.value == "") {
                    return -1;
                }

                if (b.tagName == "OPTION" && b.value == "") {
                    return 1;
                }
            }

            var textA = (a.tagName == "OPTION" ? (options.useValues ? a.value : a.text) : a.label);
            var textB = (b.tagName == "OPTION" ? (options.useValues ? a.value : b.text) : b.label);

            if (textA > textB) {
                return options.reverse ? -1 : 1;
            }

            if (textA < textB) {
                return options.reverse ? 1 : -1;
            }

            return 0;

        });

        $options.remove();
        $optionsSorted.appendTo($node);

        return true;

    };

    var selected = $(this).val();
    var sorted = sortOptions($(this), $(this), {...OPTIONS_DEFAULT, ...options});
    $(this).val(selected);

    return sorted;

};

Sau đó, bạn có thể gọi sortSelect()hàm trên bất kỳ <SELECT>thẻ nào hoặc chỉ một thẻ <OPTGROUP>để chỉ sắp xếp các tùy chọn của một nhóm.

Thí dụ:

$('select').sortSelect();

Đảo ngược thứ tự bằng cách sử dụng tùy chọn "đảo ngược":

$('select').sortSelect({
    reverse: true
});

Bạn có thể áp dụng điều này cho tất cả các lựa chọn tự động, có lẽ chỉ khi chúng bao gồm một lớp quan trọng (ví dụ: "js-sort") với cái này:

$('select.js-sort').each(function(k, v){
    $(v).sortSelect();
});