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

Question

我试图理解按字母顺序对 select 元素中的 option 元素进行排序。理想情况下，我希望将它作为一个单独的函数，我可以只传入 select 元素，因为它需要在用户单击某些按钮时进行排序。

我四处寻找执行此操作的好方法，但未能找到适合我的方法。

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

这在某种程度上是可能的吗？

Answer 1

我要做的是:

1. 提取每个 <option> 的文本和值放入一组对象中；
2. 对数组进行排序；
3. 更新<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);
});

Here is a working 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;
});