使用Javascript对下拉列表进行排序

Question

我想使用 JavaScript 对下拉列表项进行排序，请问有人能告诉我该如何操作。

- Chetan

---

下拉项是什么意思？ - Gumbo

你是如何获取数据并将其填充到下拉列表中的？ - NoahD

这个回答解决了你的问题吗？使用Javascript对选择元素的内容进行排序 - Elikill58

Answer 1

你可以使用jQuery，像这样：

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

但是最好问一下为什么以及你想要实现什么目标。

- masto

---

+1 基于完全不使用 jQuery 所需的内容（参见下面的回答）。 - Sean Bright

这对我非常有用。我的下拉列表在另一个下拉列表更改时被填充。这段代码起了作用！谢谢 @mastro - shanabus

哇，简单的答案就能解决问题。 - Kris

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>

- altblue

---

.value比较仅适用于数字；对于词典排序，请参见masto答案中的比较器。 - bobince

抱歉，我不明白你的评论有什么意义，因为我相信你已经看到了数字比较下面一行代码，它对选项的“文本”进行了字典序比较！:( - altblue

不错的使用了<select>特定的add()/remove()。 - Crescent Fresh

这个解决方案保留了所有附加到选项的属性；如果您使用这些属性来存储数据：在重新排序时不会丢失。非常好！这是ary.sort函数中按其中一个属性排序的替代方法： var aPosition = parseInt(a.getAttribute('Position')); var bPosition = parseInt(b.getAttribute('Position')); return aPosition < bPosition ? -1 : aPosition > bPosition ? 1 : 0; - jrgd

Answer 3

你可以尝试使用 JQuery 排序函数来完成这项工作 -- 试试这个 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代码 -

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

或者

你也可以使用数组排序来实现 -

尝试这个

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

- Ishan Jain

Answer 4

依赖于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">已按以下方式排序：

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

或者

SortOptions("my-list-id");

- Peter Moresi

---

如果你想根据_value_而不是文本来排序项目，那么函数应该这样写：function (a, b) { return a.value - b.value })。 - Chris B

Answer 5

将选项的值和文本放入数组中，对数组进行排序，然后用从排序后的数组构造出来的新元素替换现有的选项元素。

- Russ Cam

---

这是我找到的一个链接，展示了如何做到这一点：http://www.w3schools.com/jsref/jsref_sort.asp - mrTomahawk

Answer 6

整个项目的下拉菜单

$(document).ready(function () {
    $.when($('select').addClass('auto-drop-sort')).then($.fn.sortDropOptions("auto-drop-sort"))
})

/*sort all dropdown*/
$.fn.sortDropOptions = function(dropdown_class){
    var prePrepend = ".";
    if (dropdown_class.match("^.") == ".") prePrepend = "";
    var myParent = $(prePrepend + dropdown_class);
    $.each(myParent, function(index, val) {
        /*if any select tag has this class 'manual-drop-sort' this function wont work for that particular*/
        if ( ! $(val).hasClass('manual-drop-sort') ) {
            var selectedVal = $(val).val()
            $(val).html($(val).find('option').sort(
                function (a, b) {
                    if ( a.value != -1 && a.value != 0 && a.value != '' ) {
                        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 
                    }
                })
            );
            $(val).val(selectedVal)
        }else{
            /* set custom sort for individual select tag using name/id */
        }
    });
}

- Gobinda Nandi

Answer 7

这里有一种方法，你可以在事后做到这一点...但实际上最好先对数组进行排序，然后再填充它。如果你必须在之后做到这一点，那么在这里...你也可以加入忽略大小写的选项。你也可以不存储在sortedOptionsAll中，直接填充组合框。由你选择。它可以被重构、简化等。这只是一个大致的想法。

<script>
    function sortCombo(comboBoxId) {
    //get drop down
    let comboBox = document.getElementById(comboBoxId);

    //create array for storage 
    let optionsText = [];
    let optionsTextSorted = [];
    let optionsValues = [];
    let sortedOptionsAll = [];

    //store in the array 
    Array.from(comboBox.options).forEach(x => {
        optionsText.push(x.text);
        optionsValues.push(x.value);
    }
    );

    optionsTextSorted = [...optionsText];
    optionsTextSorted.sort();
    optionsTextSorted.forEach(x => {
        sortedOptionsAll.push({ value: optionsValues[optionsText.indexOf(x)], text: x });
    }
    );

    //clear the combo box 
    Array.from(comboBox.options).forEach(x => x.text = '');

    //fill the combobox 
    for (let i = 0; i < sortedOptionsAll.length; i++) {
        document.getElementById(comboBoxId)[i].text = sortedOptionsAll[i].text;
        document.getElementById(comboBoxId)[i].value = sortedOptionsAll[i].value;
    }
}
</script>

- Automation Maven

Answer 8

提供的答案并不适合我的情况，所以我自己写了一个（尤其是不想用jQuery）。 想着这可能会对其他人有所帮助。

sortDropDown(document.querySelector('select'));

function sortDropDown(d){
    //save option values
    var existingOptions=d.options; 

    //keep track of previously selected option
    var selectedOpt=d.selectedOptions[0].value;

    //turn nodeList into Array of values
    existingOptions=[].slice.call(existingOptions).map(function(a){return a.innerText});

    //make sure options are unique
    existingOptions = existingOptions.filter( function(value, index, self) { 
        return self.indexOf(value) === index;
    }); 

    //sort options
    existingOptions.sort();

    //keep "All" option as first element
    existingOptions.splice(0, 0, existingOptions.splice(existingOptions.indexOf('All'), 1)[0]);

    //repleace dropdown contents
    var t='';
    existingOptions.forEach(function(a){
        t+='<option '+(a==selectedOpt?'selected':'')+' value="'+a+'">'+a+'</option>';
    });
    d.innerHTML=t;
}

- BigBalli