javascript - 按值对 Html Select 的选项进行排序的最有效方法是什么，同时保留当前选定的项目？

Question

我有 jQuery，但我不确定它是否有任何内置的排序助手。text我可以为每个项目的、value和属性制作一个二维数组selected，但我认为内置的 javascript 不能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);

Mozilla 的排序文档（特别是 compareFunction）和维基百科的排序算法页面是相关的。

如果要使排序不区分大小写，请替换text为text.toLowerCase()

上面显示的排序函数说明了如何排序。准确排序非英语语言可能很复杂（请参阅unicode collat​​ion algorithm）。在 sort 函数中使用localeCompare是一个很好的解决方案，例如：

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

Answer 2

稍微修改了上面汤姆的答案，以便它实际上修改要排序的选择框的内容，而不仅仅是返回排序的元素。

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

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

Answer 3

我刚刚将马克的想法包装在一个 jquery 函数中

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

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

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

好吧，在 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，哇哦！

还有比这更简单的方法吗？javascript 或 jQuery 中是否有一些方法可以对我缺少的选择进行排序，或者这是最好的方法？

Answer 6

有一个封闭的 jQuery 票证，它应该可以工作，但不包含在核心中。

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

从Google Groups thread引用，我认为您只需传入一个用于排序的函数，就像这样

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

希望能帮助到你！

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"。在大多数情况下，这可能会正常工作。

如果您确实想单独对值进行排序，或者将值解释为数字，则可以将比较函数传递给 sort()：

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

Answer 9

记住：如果你想使用上下文选择器，仅仅连接 ID 是行不通的

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

Answer 10

有点晚了，但我已经实现了一个更复杂的函数，你可以通用地包含它。它有一些用于不同输出的选项。它还可以<OPTGROUP>根据标签递归到标签中。

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

};

sortSelect()然后，您可以在任何标签上调用该函数<SELECT>，或者只调用一个<OPTGROUP>来仅对组的选项进行排序。

例子：

$('select').sortSelect();

使用“reverse”选项反转顺序：

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

您可以自动将此应用于所有选择，也许只有当它们包含一个重要的类（例如“js-sort”）时：

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

Answer 11

似乎 jquery 对于 html 选择元素中的排序选项仍然不是特别有用。以下是一些用于排序选项的简单 JavaScript 代码：

function sortOptionsByText(a,b) {
  // I keep an empty value option on top, b.value comparison to 0 might not be necessary if empty value is always on top...
  if (a.value.length==0 || (b.value.length>0 && a.text <= b.text)) return -1; // no sort: a, b
  return 1; // sort switches places: b, a
}
function sortOptionsByValue(a,b) {
  if (a.value <= b.value) return -1; // a, b
  return 1; // b, a
}
function clearChildren(elem) {
  if (elem) {
    while (elem.firstChild) {
      elem.removeChild(elem.firstChild);
    }
  }
}
function sortSelectElem(sel,byText) {
  const val=sel.value;
  const tmp=[...sel.options];
  tmp.sort(byText?sortOptionsByText:sortOptionsByValue);
  clearChildren(sel);
  sel.append(...tmp);
  sel.value=val;
}

RACE: <select id="list" size="6">
  <option value="">--PICK ONE--</option>
  <option value="1">HUMANOID</option>
  <option value="2">AMPHIBIAN</option>
  <option value="3">REPTILE</option>
  <option value="4">INSECTOID</option>
</select><br>
<button type="button" onclick="sortSelectElem(document.getElementById('list'));">SORT LIST BY VALUE</button><br>
<button type="button" onclick="sortSelectElem(document.getElementById('list'),true);">SORT LIST BY TEXT</button>

Answer 12

使用 jquery，这在 Chrome 中对我有用，以便对从数据库未排序元素中进行的选择进行排序。

$(document).ready(function(){
    
    var $list = $("#my_select");
    var selected = $("#my_select").val(); //save selected value
    
    $list.children().detach().sort(function(a, b) {
        return $(a).text().localeCompare($(b).text());
      }).appendTo($list);  //do the sorting locale for latin chars
    
    $("#my_select").val(selected); //select previous selected value

});