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

Raju28 发表于 Dev

拉珠28

我想按字母顺序对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(); } 
});

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

奥斯卡·加西亚（OscarGarcia）

Select2 API v3.x（`sortResults`）

您可以使用sortResultscallback选项对元素进行排序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`）

您可以使用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>

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

使用jQuery

感谢@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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。