使用Javascriptsorting下拉列表

我想sorting下拉项目使用JavaScript，谁能告诉我如何做到这一点。

Answer 1

你可以使用jQuery和这样的东西：

$("#id").html($("#id option").sort(function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 })) 

但是最好问你为什么和你想要完成什么。

Answer 2

 <select id="foo" size="10"> <option value="3">three</option> <option value="1">one</option> <option value="0">zero</option> <option value="2">two</option> </select> <script> // WARN: won't handle OPTGROUPs! var sel = document.getElementById('foo'); // convert OPTIONs NodeList to an Array // - keep in mind that we're using the original OPTION objects var ary = (function(nl) { var a = []; for (var i = 0, len = nl.length; i < len; i++) a.push(nl.item(i)); return a; })(sel.options); // sort OPTIONs Array ary.sort(function(a,b){ // sort by "value"? (numeric comparison) // NOTE: please remember what ".value" means for OPTION objects return a.value - b.value; // or by "label"? (lexicographic comparison) - case sensitive //return a.text < b.text ? -1 : a.text > b.text ? 1 : 0; // or by "label"? (lexicographic comparison) - case insensitive //var aText = a.text.toLowerCase(); //var bText = b.text.toLowerCase(); //return aText < bText ? -1 : aText > bText ? 1 : 0; }); // remove all OPTIONs from SELECT (don't worry, the original // OPTION objects are still referenced in "ary") ;-) for (var i = 0, len = ary.length; i < len; i++) sel.remove(ary[i].index); // (re)add re-ordered OPTIONs to SELECT for (var i = 0, len = ary.length; i < len; i++) sel.add(ary[i], null); </script> 

Answer 3

你可以试试这个工作的JQuerysortingfunction –

尝试这个

HTML代码 –

 <select id="ddlList"> <option value="3">Three</option> <option value="1">One</option> <option value="1">one</option> <option value="1">a</option> <option value="1">b</option> <option value="1">A</option> <option value="1">B</option> <option value="0">Zero</option> <option value="2">Two</option> <option value="8">Eight</option> </select> 

JQUERY CODE –

 $("#ddlList").html($('#ddlList option').sort(function(x, y) { return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1; })); $("#ddlList").get(0).selectedIndex = 0; e.preventDefault(); 

要么

你也可以使用数组sorting这个 –

尝试这个

  var options = $('#ddlList option'); var arr = options.map(function (_, o) { return { t: $(o).text(), v: o.value }; }).get(); arr.sort(function (o1, o2) { return o1.t.toUpperCase() > o2.t.toUpperCase() ? 1 : o1.t.toUpperCase() < o2.t.toUpperCase() ? -1 : 0; }); options.each(function (i, o) { o.value = arr[i].v; $(o).text(arr[i].t); }); 

Answer 4

将选项值和文本放入数组中，对数组进行sorting，然后用已sorting数组构造的新元素replace现有的选项元素。

Answer 5

取决于JQUERY

 function SortOptions(id) { var prePrepend = "#"; if (id.match("^#") == "#") prePrepend = ""; $(prePrepend + id).html($(prePrepend + id + " option").sort( function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }) ); } 

例子：

<select id =“my-list-id”>sorting为：

 SortOptions("#my-list-id"); 

要么

 SortOptions("my-list-id");