我正在尝试按字母顺序理解option元素中的排序元素select。理想情况下，我希望将其作为一个单独的函数，我可以在其中传入 select 元素，因为当用户单击某些按钮时需要对其进行排序。
我一直在寻找一种很好的方法来做到这一点，但找不到任何对我有用的东西。
选项元素应按文本的字母顺序排序，而不是按值排序。
这在某种程度上可能吗？
问问题
172639 次
11 回答
131
我要做的是：
- 将每个文本和值提取
<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);
});
编辑——如果要排序以忽略字母大小写，可以在比较之前使用 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;
});
于 2012-08-22T12:40:00.230 回答
64
接受的答案并非在所有情况下都是最好的，因为有时您希望保留选项类别和不同的参数（例如 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()
于 2014-10-07T09:12:33.153 回答
35
html:
<select id="list">
<option value="op3">option 3</option>
<option value="op1">option 1</option>
<option value="op2">option 2</option>
</select>
jQuery：
var options = $("#list option"); // Collect options
options.detach().sort(function(a,b) { // Detach from select, then Sort
var at = $(a).text();
var bt = $(b).text();
return (at > bt)?1:((at < bt)?-1:0); // Tell the sort function how to order
});
options.appendTo("#list"); // Re-attach to select
我使用了 tracevipin 的解决方案，效果非常好。我在这里为像我这样喜欢查找易于阅读的代码的人提供了一个稍微修改过的版本，并在理解后对其进行压缩。我还使用.detach而不是.remove保留选项 DOM 元素上的任何绑定。
于 2015-09-23T17:11:44.530 回答
30
<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);
}));
于 2012-08-22T12:48:17.610 回答
7
这是我改进的Pointy 解决方案：
function sortSelectOptions(selector, skip_first) {
var options = (skip_first) ? $(selector + ' option:not(:first)') : $(selector + ' option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value, s: $(o).prop('selected') }; }).get();
arr.sort(function(o1, o2) {
var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each(function(i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
if (arr[i].s) {
$(o).attr('selected', 'selected').prop('selected', true);
} else {
$(o).removeAttr('selected');
$(o).prop('selected', false);
}
});
}
该函数具有skip_first参数，当您想将第一个选项保持在顶部时很有用，例如当它是“选择下方：”时。
它还跟踪先前选择的选项。
示例用法：
jQuery(document).ready(function($) {
sortSelectOptions('#select-id', true);
});
于 2016-04-14T12:35:40.183 回答
7
我知道这个话题很老，但我认为我的回答可能对很多人有用。
这是使用 ES6由Pointy的答案制作的 jQuery 插件：
/**
* Sort values alphabetically in select
* source: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery
*/
$.fn.extend({
sortSelect() {
let options = this.find("option"),
arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort((o1, o2) => { // sort select
let t1 = o1.t.toLowerCase(),
t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each((i, o) => {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
});
使用非常简单
$("select").sortSelect();
于 2016-10-16T12:17:40.807 回答
2
没有一个答案对我有用。出于某种奇怪的原因，在遍历选项时，每个选项在text()被调用时什么都不返回。相反，我被迫通过attr('label')
/**
* Sort the options of the target select list
* alphabetically by label. For some reason, when
* we call detach(), the returned options have no
* text() and instead we're forced to get the option's
* label via the 'label' attribute.
* @param select jQuery selector
*/
function sort_multi_select(select) {
var options = select.find('option');
options.detach().sort(function (a, b) {
var at = $(a).attr('label'), //label, not text()
bt = $(b).attr('label');
return at > bt ? 1 : at < bt ? -1 : 0;
});
options.appendTo(select);
}
//example
sort_multi_select($('#my_select'));
于 2018-02-27T16:57:13.387 回答
2
我结合了marxin和kuxa 的优秀答案的部分来创建一个 jQuery 自定义函数，
按文本值对选项进行排序（不区分大小写），
保持任何已经选择的值，并且
返回执行函数的原始 jQuery 对象：
$.fn.extend({ sortSelect() { return this.each(function(){ let $this = $(this), original_selection = $this.val(), $options = $this.find('option'), arr = $options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get(); arr.sort((o1, o2) => { // sort select let t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase(); return t1 > t2 ? 1 : t1 < t2 ? -1 : 0; }); $options.each((i, o) => { o.value = arr[i].v; $(o).text(arr[i].t); }); $this.val(original_selection); }) } });
Working example on jsFiddle is available at https://jsfiddle.net/jhfrench/64och25e/.
于 2020-05-27T18:10:51.327 回答
1
jquery.selectboxes.js插件有一个排序方法。您可以实现该插件，或深入研究代码以查看对选项进行排序的方法。
于 2012-08-22T12:39:27.170 回答
1
是的，您可以按其文本对选项进行排序并将其附加回选择框。
function NASort(a, b) {
if (a.innerHTML == 'NA') {
return 1;
}
else if (b.innerHTML == 'NA') {
return -1;
}
return (a.innerHTML > b.innerHTML) ? 1 : -1;
};
于 2016-07-15T07:17:25.800 回答
1
Malakgeorge 的回答很好，可以很容易地包装到一个 jQuery 函数中：
$.fn.sortSelectByText = function(){
this.each(function(){
var selected = $(this).val();
var opts_list = $(this).find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
$(this).html('').append(opts_list);
$(this).val(selected);
})
return this;
}
于 2017-05-27T12:33:03.307 回答