使用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) {&nbsp; o.value = arr[i].v;&nbsp; $(o).text(arr[i].t);});这是一个工作的jsfiddle。编辑 -如果要排序而忽略字母大小写，则可以在比较之前使用JavaScript .toUpperCase()或.toLowerCase()函数：arr.sort(function(o1, o2) {&nbsp; var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();&nbsp; return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;});

Answer 2

接受的答案并非在所有情况下都是最好的，因为有时您希望保留选项和不同参数的类（例如data-foo）。我的解决方案是：var sel = $('#select_id');var selected = sel.val(); // cache selected value, before reorderingvar 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" >&nbsp; &nbsp; <option value="val1" > DEF </option>&nbsp; &nbsp; <option value="val4" > GRT </option>&nbsp; &nbsp; <option value="val2" > ABC </option>&nbsp; &nbsp; <option value="val3" > OPL </option>&nbsp; &nbsp; <option value="val5" > AWS </option>&nbsp; &nbsp; <option value="val9" > BTY </option></select>。$("#mSelect").append($("#mSelect option").remove().sort(function(a, b) {&nbsp; &nbsp; var at = $(a).text(), bt = $(b).text();&nbsp; &nbsp; return (at > bt)?1:((at < bt)?-1:0);}));