如何按字母顺序对 select2 标签的结果进行排序？

Question

我想按字母顺序排序（不区分大小写），从 select2 中选择的标签。 我已使用排序器功能对要选择的标签进行排序，但一旦选择，它们就不会按字母顺序显示。

如何做到这一点？ （我使用最新的 4.0.13 select2 版本）。

$('#example1').select2({
        tags: true,
        multiple: true,
        allowClear: true,
        sorter: function(data) {
                return data.sort(function (a, b) {
                        var a1 = a.text.toLowerCase();
                        var b1 = b.text.toLowerCase();
                        if (a1 > b1) {
                            return 1;
                        }
                        if (a1 < b1) {
                            return -1;
                        }
                        return 0;
                });
        }
});

<select name="list" id="example1" style="width:500px;">
   <option>United States</option>
   <option>Austria</option>
   <option>Alabama</option>
   <option>Jamaica</option>
   <option>Taiwan</option>
   <option>canada</option>
   <option>palau</option>
   <option>Wyoming</option>
</select>

应该是阿拉巴马州、奥地利、牙买加、美国。

Answer 1

使用排序器可以工作，但allowClear会把事情搞砸。

$('#example1').select2({
  tags: true,
  multiple: true,
//  allowClear: true,
  sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<select name="list" id="example1"  multiple="multiple">
  <option value="USA">United States</option>
  <option value="AT">Austria</option>
  <option>Alabama</option>
  <option>Jamaica</option>
  <option>Taiwan</option>
  <option>canada</option>
  <option>palau</option>
  <option>Wyoming</option>
</select>

Answer 2

这是我认为您正在寻找的一些工作代码，

HTML

<select name="list" id="example1" style="width:500px;">
   <option value="United States">United States</option>
   <option value="Austria">Austria</option>
   <option value="Alabama">Alabama</option>
   <option value="Jamaica">Jamaica</option>
   <option value="Taiwan">Taiwan</option>
   <option value="canada">canada</option>
   <option value="palau">palau</option>
   <option value="Wyoming">Wyoming</option>
</select>

JS 来自，使用 jQuery 按字母顺序对选项元素进行排序

   var options = $("#example1 option"); // Collect options         
    options.detach().sort(function(a, b) { // Detach from select, then Sort
      var at = $(a).text().toLowerCase();
      var bt = $(b).text().toLowerCase();
      return (at > bt) ? 1 : ((at < bt) ? -1 : 0); // Tell the sort function how to order
    });
    options.appendTo("#example1");