使用 jQuery 对选择框进行排序答案

【问题标题】：Sorting Select box with jQuery使用 jQuery 对选择框进行排序
【发布时间】：2012-03-27 10:16:01
【问题描述】：

我在表单上有一个选择框，它带有一个增量 rel 属性。我有一个函数可以按 .text() 值对选项进行排序，按字母顺序排列。

我的问题是，使用 jQuery，我如何使用 rel 属性按升序排序？

<option rel="1" value="ASHCHRC">Ashchurch for Tewkesbury </option>
<option rel="2" value="EVESHAM">Evesham </option>
<option rel="3" value="CHLTNHM">Cheltenham Spa </option>
<option rel="4" value="PERSHOR">Pershore </option>
<option rel="5" value="HONYBRN">Honeybourne </option>
<option rel="6" value="MINMARS">Moreton-in-Marsh </option>
<option rel="7" value="GLOSTER">Gloucester </option>
<option rel="8" value="GTMLVRN">Great Malvern </option>
<option rel="9" value="MLVRNLK">Malvern Link </option>

我的排序函数：var object;可以是整个表单中的许多选择框之一。

$(object).each(function() {

    // Keep track of the selected option.
    var selectedValue = $(this).val();

    // sort it out
    $(this).html($("option", $(this)).sort(function(a, b) { 
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 
    }));

    // Select one option.
    $(this).val(selectedValue);

});

【问题讨论】：

标签： jquery sorting drop-down-menu

【解决方案1】：

如果你想按 rel 排序，你应该改变你的函数

$(this).html($("option", $(this)).sort(function(a, b) { 
    var arel = $(a).attr('rel');
    var brel = $(b).attr('rel');
    return arel == brel ? 0 : arel < brel ? -1 : 1 
}));

用 parseInt() 编辑

$(this).html($("option", $(this)).sort(function(a, b) { 
    var arel = parseInt($(a).attr('rel'), 10);
    var brel = parseInt($(b).attr('rel'), 10);
    return arel == brel ? 0 : arel < brel ? -1 : 1 
}));

【讨论】：

如果 rel 总是数字，你应该 parseInt() 它 - 否则顺序将是 1,10,11,12,2,3,4...
如何将 parseInt() 实现到上述函数中？
是的，这更好，第一个函数抛出了一些奇怪的结果，就像 Rory 指出的那样，需要 parseInt() :D

【解决方案2】：

供将来参考，如果option 有数据或道具（例如.prop('selected', true)），则接受的答案不完整。使用.html()后会被移除。

下面的函数可能没有优化，但可以正常工作：

$.fn.sortChildren = function(selector, sortFunc) {
    $(this)
    .children(selector)
    .detach()
    .sort(sortFunc)
    .appendTo($(this));
};

$('select').sortChildren('option', function(a, b) {
    // sort impl
});

【讨论】：

绝对是！在您不需要迭代多个选择的一般情况下，$('select').children().detach().sort(sortFunc).appendTo($('select')) 工作得非常好。不过要注意儿童中的option 和optgroup。

【解决方案3】：

您可以使用 .attr() 函数来获取 jQuery 中属性的值。请参阅http://api.jquery.com/attr/ 了解更多信息。

试试这个：

$(object).each(function() {

    // Keep track of the selected option.
   var selectedValue = $(this).val();

   // sort it out
   $(this).html($("option", $(this)).sort(function(a, b) {
       var aRel = $(a).attr("rel");
       var bRel = $(b).attr("rel");
       return aRel == bRel ? 0 : aRel < bRel ? -1 : 1 
   }));

   // Select one option.
   $(this).val(selectedValue);

});

【讨论】：

【解决方案4】：

试试这个。

        $(document).ready(function()
        {
            var myarray=new Array();               
            $("select option").each(function()
            {
                myarray.push({value:this.value, optiontext:$(this).text()});
            });

            myarray.sort(sortfun);
            $newHmtl="";
            for(var i=0;i<myarray.length;i++)
            {

                $newHmtl+="<option rel='1' value='"+myarray[i]['value']+"'>"+myarray[i]['optiontext']+"</option>";
            }
            $("select").html($newHmtl);
        });            


        function sortfun(a,b) 
        {
            a = a['value'];
            b = b['value'];                
            return a == b ? 0 : (a < b ? -1 : 1)
        }

【讨论】：

【解决方案5】：

我需要一个类似的解决方案，然后对原始功能进行了一些更改，并且效果很好。

function NASort(a, b) {  
    return (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) ? 1 : -1;
};

$('select option').sort(NASort).appendTo('select');

【讨论】：