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

标签 javascript jquery html sorting

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

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

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

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

最佳答案

我要做的是:

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

关于javascript - 使用 jQuery 按字母顺序对选项元素进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12073270/

相关文章:

javascript - 如何在 asp :TextBox 的 keyup 事件上调用 javascript 函数

javascript - 始终检查语句更新

javascript - 单击时如何在html中的<p>中增加一个数字

html - flexbox 最大宽度和 IE

html - 水平滚动容器网页

javascript - 在 JavaScript 中是否可以取消引用函数

javascript - 如何在 PLOTLY JS 中为每个子图添加标题

javascript - 如何在没有 jQuery 的情况下序列化表单?

jquery - 获取文本区域或文本编辑器的值

javascript - 在单独层次结构的两个元素之间显示 <div>