使用选项组对下拉列表进行排序

Sort a dropdown list with optgroups

本文关键字:排序 下拉列表 选项      更新时间:2023-09-26

我有一个下拉菜单,里面有很多我想按字母顺序排列的项目,如果有区别的话,下拉菜单会使用optgroups。

假设我有这样的东西:

<optgroup label="Fruits">
<option>Banana</option>
<option>Apple</option>
<option>Orange</option>
<option>Avocado</option>
</optgroup>

我该如何制作它,以便按字母顺序显示每个optgroup的值?在上面的例子中,它的顺序是苹果、鳄梨、香蕉、橙子。

您可以使用sort()

$('optgroup[label="Fruits"] option').sort(function(a, b) {
  return $(a).text() > $(b).text();
}).appendTo('optgroup[label="Fruits"]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<optgroup label="Fruits">
  <option>Banana</option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Avocado</option>
</optgroup>