使用jQuery按字母顺序对选项元素进行排序

Question 1

我正在尝试按字母顺序理解option元素内的排序元素select。理想情况下，我想将此作为一个单独的函数，在这里我可以只传递select元素，因为当用户单击某些按钮时需要对它进行排序。

我在高低处寻找了实现此目标的一种好方法，但是找不到任何对我有用的方法。

选项元素应按文本而不是值按字母顺序排序。

这有可能吗？

Question 2

我要做的是：

将每个文本和值提取<option>到对象数组中；
对数组进行排序；
<option>按顺序使用数组内容更新元素。

要使用jQuery，您可以执行以下操作：

var options = $('select.whatever option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
  o.value = arr[i].v;
  $(o).text(arr[i].t);
});

这是一个工作的jsfiddle。

编辑-如果要排序以忽略字母大小写，可以在比较之前使用JavaScript.toUpperCase()或.toLowerCase()函数：

arr.sort(function(o1, o2) {
  var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();

  return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});

Question 3

接受的答案并非在所有情况下都是最佳的，因为有时您希望保留选项类和不同的参数（例如data-foo）。

我的解决方案是：

var sel = $('#select_id');
var selected = sel.val(); // cache selected value, before reordering
var opts_list = sel.find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected); // set cached selected value

//对于ie11或获得空白选项的用户，请替换html（''）empty（）

Question 4

<select id="mSelect" >
    <option value="val1" > DEF </option>
    <option value="val4" > GRT </option>
    <option value="val2" > ABC </option>
    <option value="val3" > OPL </option>
    <option value="val5" > AWS </option>
    <option value="val9" > BTY </option>
</select>

。

$("#mSelect").append($("#mSelect option").remove().sort(function(a, b) {
    var at = $(a).text(), bt = $(b).text();
    return (at > bt)?1:((at < bt)?-1:0);
}));

Question 5

的HTML：

<select id="list">
    <option value="op3">option 3</option>
    <option value="op1">option 1</option>
    <option value="op2">option 2</option>
</select>

jQuery的：

var options = $("#list option");                    // Collect options         
options.detach().sort(function(a,b) {               // Detach from select, then Sort
    var at = $(a).text();
    var bt = $(b).text();         
    return (at > bt)?1:((at < bt)?-1:0);            // Tell the sort function how to order
});
options.appendTo("#list");                          // Re-attach to select

我使用了tracevipin的解决方案，效果很好。我在这里为喜欢我的人提供了稍微修改的版本，他们喜欢找到易于阅读的代码，并在理解后对其进行压缩。我还使用了.detach而不是.remove保留选项DOM元素上的任何绑定。

Question 6

这是Pointy解决方案的改进版本：

function sortSelectOptions(selector, skip_first) {
    var options = (skip_first) ? $(selector + ' option:not(:first)') : $(selector + ' option');
    var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value, s: $(o).prop('selected') }; }).get();
    arr.sort(function(o1, o2) {
      var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
      return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
    }); 
    options.each(function(i, o) {
        o.value = arr[i].v;
        $(o).text(arr[i].t);
        if (arr[i].s) {
            $(o).attr('selected', 'selected').prop('selected', true);
        } else {
            $(o).removeAttr('selected');
            $(o).prop('selected', false);
        }
    }); 
}

该函数具有skip_first参数，当您要将第一个选项保持在顶部时（例如，在“选择以下位置：”时），该参数很有用。

它还跟踪先前选择的选项。

用法示例：

jQuery(document).ready(function($) {

  sortSelectOptions('#select-id', true);

});

Question 7

我知道这个话题很老，但是我认为我的回答对很多人有用。

这是Pointy使用ES6的答案制成的jQuery插件：

/**
 * Sort values alphabetically in select
 * source: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery
 */
$.fn.extend({
    sortSelect() {
        let options = this.find("option"),
            arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();

        arr.sort((o1, o2) => { // sort select
            let t1 = o1.t.toLowerCase(), 
                t2 = o2.t.toLowerCase();
            return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
        });

        options.each((i, o) => {
            o.value = arr[i].v;
            $(o).text(arr[i].t);
        });
    }
});

使用非常容易

$("select").sortSelect();

Question 8

没有答案对我有用。出于某些奇怪的原因，在遍历选项时，每个选项在text()被调用时均不返回任何内容。相反，我被迫通过以下方式检索选项的标签attr('label')

/**
 * Sort the options of the target select list
 * alphabetically by label. For some reason, when
 * we call detach(), the returned options have no
 * text() and instead we're forced to get the option's
 * label via the 'label' attribute.
 * @param select jQuery selector
 */
function sort_multi_select(select) {
    var options = select.find('option');
    options.detach().sort(function (a, b) {
        var at = $(a).attr('label'), //label, not text()
            bt = $(b).attr('label');
        return at > bt ? 1 : at < bt ? -1 : 0;
    });
    options.appendTo(select);
}

//example
sort_multi_select($('#my_select'));

Question 9

是的，您可以按文本对选项进行排序，然后将其附加回选择框。

 function NASort(a, b) {    
      if (a.innerHTML == 'NA') {
          return 1;   
      }
      else if (b.innerHTML == 'NA') {
          return -1;   
      }       
      return (a.innerHTML > b.innerHTML) ? 1 : -1;
  };

小提琴：https : //jsfiddle.net/vaishali_ravisankar/5zfohf6v/

Question 10

Malakgeorge的答案很好，可以轻松地包装到jQuery函数中：

$.fn.sortSelectByText = function(){
    this.each(function(){
        var selected = $(this).val(); 
        var opts_list = $(this).find('option');
        opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
        $(this).html('').append(opts_list);
        $(this).val(selected); 
    })
    return this;        
}

Question 11

该jquery.selectboxes.js插件有一个排序方法。您可以实现插件，也可以深入研究代码以查看对选项进行排序的方法。

Question 12

我结合了marxin和kuxa的出色答案中的部分，以创建一个jQuery自定义函数，

按选项的文本值排序（不区分大小写），
保持任何已经选择的值，并且

返回对其执行功能的原始jQuery对象：

$.fn.extend({
    sortSelect() {
        return this.each(function(){
            let $this = $(this),
                original_selection = $this.val(),
                $options = $this.find('option'),
                arr = $options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();

            arr.sort((o1, o2) => {
                // sort select
                let t1 = o1.t.toLowerCase(), 
                    t2 = o2.t.toLowerCase();
                return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
            });

            $options.each((i, o) => {
                o.value = arr[i].v;
                $(o).text(arr[i].t);
            });

            $this.val(original_selection); 
        })
    }
});

有关jsFiddle的工作示例，请访问https://jsfiddle.net/jhfrench/64och25e/。