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

Question

我有一个下拉菜单，其中包含许多我想按字母顺序排列的项目，如果它有所不同，下拉菜单会使用optgroups。

让我说我有这样的事情：

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

我如何制作它以便按字母顺序为每个optgroup显示它们？在上面的示例中，它的顺序是Apple，Avocado，Banana，Orange。

Answer 1

您可以使用sort()

＆＃13;

＆＃13;

$('optgroup[label="Fruits"] option').sort(function(a, b) {
  return $(a).text() > $(b).text();
}).appendTo('optgroup[label="Fruits"]');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;