ما هي الطريقة الأكثر فعالية لفرز خيارات تحديد Html حسب القيمة، مع الحفاظ على العنصر المحدد حاليًا؟

Question

لدي jQuery ولكني لست متأكدًا مما إذا كان يحتوي على أي أدوات مساعدة للفرز مضمنة.يمكنني إنشاء مجموعة ثنائية الأبعاد لكل عنصر text, value, ، و selected خصائص، ولكن لا أعتقد أن جافا سكريبت مدمج Array.sort() ستعمل بشكل صحيح.

Answer 1

استخرج الخيارات إلى مصفوفة مؤقتة، ثم قم بفرزها، ثم أعد بناء القائمة:

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

وثائق الفرز موزيلا (على وجه التحديد وظيفة المقارنة) و صفحة خوارزمية الفرز في ويكيبيديا ذو صلة.

إذا كنت تريد أن تجعل حالة الفرز غير حساسة لحالة الأحرف، فاستبدلها text مع text.toLowerCase()

توضح وظيفة الفرز الموضحة أعلاه كيفية الفرز.يمكن أن يكون فرز اللغات غير الإنجليزية بدقة أمرًا معقدًا (انظر قسم خوارزمية تجميع يونيكود).استخدام localeCompare في وظيفة الفرز حل جيد، على سبيل المثال:

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

Answer 2

تم تعديل إجابة توم أعلاه قليلاً بحيث تقوم فعليًا بتعديل محتويات مربع التحديد المراد فرزه، بدلاً من مجرد إرجاع العناصر التي تم فرزها.

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

وظيفة مسج:

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

Answer 3

لقد قمت للتو بتغليف فكرة مارك في وظيفة jquery

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

وظيفة مسج:

$.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;
}

Answer 4

الحل الذي ذكرته في تعليقي ل @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);
    });
}

الاستخدام:

$("select").sortOptions();

لا يزال من الممكن تحسين هذا، لكنني لم أكن بحاجة إلى إضافة المزيد من الأجراس والصفارات :)

Answer 5

هناك تذكرة مسج مغلقة لنوع يجب أن يعمل، ولكن لم يتم تضمينه في النواة.

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

المشار إليه من موضوع مجموعات جوجل, ، أعتقد أنك تقوم فقط بتمرير وظيفة تُستخدم للفرز، مثل ذلك

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

نأمل أن يساعد!

Answer 6

حسنًا، في IE6 يبدو أنه يتم الفرز حسب العنصر [0] الخاص بالمصفوفة المتداخلة:

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

سأرى ما إذا كان هذا يعمل في المتصفحات الأخرى ...

يحرر:إنه يعمل في Firefox أيضًا، woo hoo!

هل هناك طريقة أسهل من هذه بالرغم من ذلك؟هل هناك طريقة مضمنة في جافا سكريبت أو jQuery لفرز الاختيارات التي أفتقدها، أم أن هذه هي أفضل طريقة؟

Answer 7

هذا هو الحل الأفضل.قم بتعريف دالة عمومية لـ 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);
}

واستدعاء الوظيفة من الكود.

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

Answer 8

Array.sort() الإعدادات الافتراضية لتحويل كل عنصر إلى سلسلة، ومقارنة تلك القيم.لذا ["value", "text", "selected"] يتم تصنيفها على أنها "value, text, selected".والذي من المحتمل أن يعمل بشكل جيد في معظم الأوقات.

إذا كنت تريد الفرز بناءً على القيمة وحدها، أو تفسير القيمة كرقم، فيمكنك تمرير دالة مقارنة إلى الترتيب ():

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

Answer 9

يتذكر:إذا كنت تريد استخدام محدد السياق، فما عليك سوى ربط المعرف فلن يعمل

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