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

Posted 2023-02-23

【中文标题】使用 Javascript 对下拉列表进行排序

【英文标题】：Sorting dropdown list using Javascript

【发布时间】：2010-10-14 14:22:39

【问题描述】：

我想使用 javascript 对下拉项目进行排序，谁能告诉我如何做到这一点。

【问题讨论】：

下拉项目是什么意思？

您是如何获得用于填充下拉列表的数据的？

【参考方案1】：

你可以使用 jQuery 和类似的东西：

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

但最好问问你为什么以及你想要完成什么。

【讨论】：

+1 完全基于没有 jQuery 的情况（请参阅下面的答案）。

这对我很有用。我的下拉列表是在更改另一个下拉列表时填充的。这段代码成功了！谢谢@mastro

哇，简单的回答就可以了。

【参考方案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>

【讨论】：

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

对不起，但我不明白你的评论有什么意义，因为我相信你已经看过数字比较下面的一行，它完全是一个，猜猜看，“字典比较”选项的“文本”？！ :(

很好地使用 特定的 add()/remove()

此解决方案保留所有附加到选项的属性；如果您使用它们来存储数据：重新订购时不会丢失。很不错！这是在 ary.sort 函数中按这些属性之一排序的替代方法： var aPosition = parseInt( a.getAttribute('Position') ); var bPosition = parseInt(b.getAttribute('Position'));返回 aPosition bPosition ？ 1 : 0;

【参考方案3】：

你可以试试这个工作的JQuery排序功能——

Try this

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

或

您也可以为此使用数组排序 -

Try This

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

【参考方案4】：

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

【讨论】：

这是我找到的一个链接，它显示了如何执行此操作：w3schools.com/jsref/jsref_sort.asp

【参考方案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 )
    );

例子：

排序为：

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

或

SortOptions("my-list-id");

【讨论】：

如果您想根据 值 而不是文本对项目进行排序，那么函数将显示为：function (a, b) return a.value - b.value )

【参考方案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 */
        
    );

【参考方案7】：

提供的答案并不真正适合我的情况，所以我自己做了（尤其是不想要 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;