Cách sắp xếp các tùy chọn select2 (plugin) theo thứ tự abc?

Question

Tôi muốn sắp xếp các tùy chọn select2 theo thứ tự bảng chữ cái. Tôi có mã sau đây và muốn biết, làm thế nào điều này có thể đạt được.

<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(); } 
}); 

Tôi muốn sắp xếp dữ liệu qua 'text' ...

Answer 1

Sử dụng tùy chọn Select2 API v3.x - sortResults

Bạn có thể sắp xếp các yếu tố sử dụng tùy chọn sortResults callback:

$('#mylist').select2({ 
 
    sortResults: function(data) { 
 
     /* Sort data using lowercase comparison */ 
 
     return data.sort(function (a, b) { 
 
      a = a.text.toLowerCase(); 
 
      b = b.text.toLowerCase(); 
 
      if (a > b) { 
 
       return 1; 
 
      } else if (a < b) { 
 
       return -1; 
 
      } 
 
      return 0; 
 
     }); 
 
    } 
 
});

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

Sử dụng Select2 options API v4.0 - sort

Bạn có thể sắp xếp các yếu tố sử dụng tùy chọn sorter callback:

$('#mylist').select2({ 
 
    sorter: function(data) { 
 
     /* Sort data using lowercase comparison */ 
 
     return data.sort(function (a, b) { 
 
      a = a.text.toLowerCase(); 
 
      b = b.text.toLowerCase(); 
 
      if (a > b) { 
 
       return 1; 
 
      } else if (a < b) { 
 
       return -1; 
 
      } 
 
      return 0; 
 
     }); 
 
    } 
 
});

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

---

tinh khiết javascript (câu trả lời cũ)

Tôi có một cách tiếp cận mục đích chung (bạn có thể sử dụng giá trị hoặc thuộc tính để sắp xếp các phần tử), nhưng mà không sử dụng jQuery:

var select = document.getElementById("mylist"); 
 
var options = []; 
 
// Get elements to sort 
 
for (var i in select.childNodes) { 
 
    var tagName = select.childNodes[i].tagName; 
 
    if (typeof(tagName) != 'undefined' && 
 
     tagName.toLowerCase() == "option") { 
 
     /* Field "content" will be used to sort options */ 
 
     options.push({ 
 
      node: select.childNodes[i], 
 
      content: select.childNodes[i].innerHTML, 
 
     }); 
 
    } 
 
} 
 
// Empty select 
 
while (select.firstChild) { 
 
    select.removeChild(select.firstChild); 
 
} 
 
// Sort function 
 
function sort(a, b){ 
 
    var aa = a.content.toLowerCase(); 
 
    var bb = b.content.toLowerCase(); 
 
    if(aa > bb) { 
 
     return 1; 
 
    } else if (aa < bb) { 
 
     return -1; 
 
    } 
 
    return 0; 
 
} 
 
// Sort array using previous function 
 
options.sort(sort); 
 
// Add the nodes again in order 
 
for (var i in options) { 
 
    select.appendChild(options[i].node); 
 
}

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

Với jQuery

var selectList = $('#mylist option'); 
 
function sort(a,b){ 
 
    a = a.text.toLowerCase(); 
 
    b = b.text.toLowerCase(); 
 
    if(a > b) { 
 
     return 1; 
 
    } else if (a < b) { 
 
     return -1; 
 
    } 
 
    return 0; 
 
} 
 
selectList.sort(sort); 
 
$('#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>

Cảm ơn @Narendra Sisodia cho jQuery tip.

Trân trọng!

Answer 2

Select2 phiên bản 4.0 đã được đổi tên thành sortResults để sorter, vì vậy bạn có thể làm:

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