Javascript 如何按字母顺序对 select2（jQuery 插件）选项进行排序？

How to sort the select2 (jQuery plugin) options alphabetically?

提问by Raju28

I want to sort the select2options in alphabetical order. I have the following code and would like to know, how can this be achieved:

我想按字母顺序对select2选项进行排序。我有以下代码，想知道如何实现：

<select name="list" id="mylist" style="width:140px;">
   <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>


$('#mylist').select2({
  sortResults: function(results) { return results.sort(); } 
});

I want to sort the data via 'text'.

我想通过“文本”对数据进行排序。

回答by OscarGarcia

Select2 API v3.x (sortResults)

Select2 API v3.x ( sortResults)

You can sort elements using sortResultscallback option with String.localeCompare():

您可以使用sortResults回调选项对元素进行排序String.localeCompare()：

$( '#mylist' ).select2({
  /* Sort data using localeCompare */
  sortResults: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" integrity="sha256-ijlUKKj3hJCiiT2HWo1kqkI79NTEYpzOsw5Rs3k42dI=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js" integrity="sha256-7A2MDY2eGSSUvgfbuH1IdzYk8qkEd3uzwiXADqPDdtY=" crossorigin="anonymous"></script>
<select name="list" id="mylist" style="width:140px;">
   <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>

Select2 API v4.0 (sorter)

Select2 API v4.0 ( sorter)

You can sort elements using sortercallback option:

您可以使用sorter回调选项对元素进行排序：

$('#mylist').select2({
    sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" integrity="sha256-xqxV4FDj5tslOz6MV13pdnXgf63lJwViadn//ciKmIs=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js" integrity="sha256-FA14tBI8v+/1BtcH9XtJpcNbComBEpdawUZA6BPXRVw=" crossorigin="anonymous"></script>
<select name="list" id="mylist" style="width:140px;">
   <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>

---

---

Without jQuery

没有 jQuery

I had another general purpose approach (you can use value or an attribute for sorting elements) without using jQuery:

我有另一种通用方法（您可以使用值或属性来对元素进行排序），而不使用 jQuery：

var select = document.getElementById("mylist");
var options = [];
// Get elements to sort
document.querySelectorAll('#mylist > option').forEach(
  option => options.push(option)
);
// Empty select
while (select.firstChild) {
    select.removeChild(select.firstChild);
}
// Sort array using innerText (of each option node)
options.sort(
  (a, b) => a.innerText.localeCompare(b.innerText)
);
// Add the nodes again in order
for (var i in options) {
    select.appendChild(options[i]);
}

<select name="list" id="mylist" style="width:140px;">
   <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>

With jQuery

使用 jQuery

Thanks @Narendra Sisodiafor jQuery tip:

感谢@Narendra Sisodia的 jQuery 提示：

/* Get options */
var selectList = $('#mylist > option');
/* Order by innerText (case insensitive) */
selectList.sort(
  (a, b) => a.innerText.localeCompare(b.innerText)
);
/* Re-do select HTML */
$('#mylist').html(selectList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<select name="list" id="mylist" style="width:140px;">
   <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>

回答by nnyby

Select2 version 4.0 has renamed sortResultsto sorter, so you can do:

Select2 4.0 版已重命名sortResults为sorter，因此您可以执行以下操作：

$('#input').select2({
    sorter: function(data) {
        return data.sort();
    }
})

回答by Bruno DA SILVA

Take a look in this code:

看看这段代码：

$('#your_select').select2({
     /* Sort data using lowercase comparison */
     sorter: data => data.sort((a,b) => a.text.toLowerCase() > b.text.toLowerCase() ? 0 : -1)

});

I hope it has been helped you! =)

希望对你有所帮助！=)

回答by Christian Heath

This was taken from the github issue, so all credit goes to the original poster, but this is what worked for me.

这是从 github 问题中获取的，因此所有功劳都归于原始海报，但这对我有用。

Version 4.x

版本 4.x

$( '#mylist' ).select2({
  sorter: function(data) {
    return data.sort(function (a, b) {
        if (a.text > b.text) {
            return 1;
        }
        if (a.text < b.text) {
            return -1;
        }
        return 0;
    });
  }
});