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

Question

我正在尝试按字母顺序了解option元素内的排序元素select。理想情况下，我想将此作为一个单独的函数，在这里我可以只传递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);
});

编辑 -如果要排序而忽略字母大小写，则可以在比较之前使用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;
});