使用jQuery按字母顺序排列选项元素
我试图了解按字母顺序select元素中的sortingoption元素。 理想情况下，我想这个作为一个单独的函数，我可以传入select元素，因为它需要sorting时，用户点击一些button。
我已经search了一个很好的方法做这个，但一直没能find任何有效的工作。
选项元素应按字母顺序排列，而不是值。
这在某种程度上可能吗？
我要做的是：
- 将每个
<option>的文本和值提取到一个对象数组中; - 对数组进行sorting;
- 按顺序更新数组内容的
<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); });
这是一个工作jsfiddle。
编辑 – 如果要进行sorting，以便忽略字母大小写，可以在比较之前使用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; });
接受的答案在所有情况下都不是最好的，因为有时候你想保持选项类和不同的参数（例如data-foo）。
我的解决scheme是：
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（''）replace为空（）
<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); }));
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的解决scheme，这非常有效。 我在这里为像我这样的人提供了一个稍微修改的版本，他喜欢find容易理解的代码，并在理解之后对其进行压缩。 我也使用.detach而不是.remove来保留选项DOM元素上的任何绑定。
这是我改进的Pointy解决scheme版本：
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参数，当您希望将第一个选项保留在最前面时（例如，在“select在下面：”时），该参数非常有用。
它也跟踪以前select的选项。
用法示例：
jQuery(document).ready(function($) { sortSelectOptions('#select-id', true); });
jquery.selectboxes.js插件有一个sorting方法。 你可以实现这个插件，或者深入代码来查看sorting选项的方法。
这将给你一个select手动重新排列，如果你需要它
你将如何使用JQuerydynamic地对<selectselect>列表进行sorting？
是的，您可以通过文本对选项进行sorting，并将其附加回select框。
function NASort(a, b) { if (a.innerHTML == 'NA') { return 1; } else if (b.innerHTML == 'NA') { return -1; } return (a.innerHTML > b.innerHTML) ? 1 : -1; };
小提琴： https ： //jsfiddle.net/vaishali_ravisankar/5zfohf6v/
我知道这个话题很古老，但我认为我的答案对很多人都有用。
这里是从Pointy的答案使用ES6的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();
马拉克乔治的答案很好，可以很容易地包装成一个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; }
