Monday, May 20, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
95
rated 0 times [  98] [ 3]  / answers: 1 / hits: 42001  / 9 Years ago, fri, february 27, 2015, 12:00:00

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



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


More From » jquery
 Answers
6

Select2 API v3.x (sortResults)



You can sort elements using sortResults callback option with 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)



You can sort elements using sorter callback option:





$('#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



I had another general purpose approach (you can use value or an attribute for sorting elements) without using 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



Thanks @Narendra Sisodia for jQuery tip:





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




[#67648] Wednesday, February 25, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
cruzs
Add To Favorites
Follow
Total Points: 710
Total Questions: 113
Total Answers: 100
Location: Nepal
Member since Sat, Jul 18, 2020
4 Years ago
cruzs questions
Thu, Nov 26, 20, 00:00, 4 Years ago
Wed, Oct 28, 20, 00:00, 4 Years ago
Wed, Aug 19, 20, 00:00, 4 Years ago
Sun, Aug 2, 20, 00:00, 4 Years ago
Sun, Jul 12, 20, 00:00, 4 Years ago
View All
;