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

Question

我正在尝试按字母顺序了解option元素内的排序元素select。理想情况下，我想将此作为一个单独的函数，在这里我可以只传递select元素，因为在用户单击某些按钮时需要对它进行排序。我在高低处搜寻了一种执行此操作的好方法，但找不到任何对我有用的方法。选项元素应按文本而不是值按字母顺序排序。这有可能吗？

Answer 1

我要做的是：

将每个文本和值提取<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;

});

Answer 2

接受的答案并非在所有情况下都是最好的，因为有时您希望保留选项和不同参数的类（例如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（）

Answer 3

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

}));