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

Question

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: ``` $('#mylist').select2({ sortResults: function(results) { return results.sort(); } }); ``` I want to sort the data via 'text'.

Accepted Answer

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)), }); ``` ``` ``` 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)), }); ``` ``` ``` 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]); } ``` ``` ``` 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); ``` ``` ```

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

Solution

Problem