What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?

Question

I have jQuery but I'm not sure if it has any built-in sorting helpers. I could make a 2d array of each item's text, value, and selected properties, but I don't think that javascript's built in Array.sort() would work correctly.

Answer 1

Extract options into a temporary array, sort, then rebuild the list:

var my_options = $("#my_select option"); var selected = $("#my_select").val();  my_options.sort(function(a,b) {     if (a.text > b.text) return 1;     if (a.text < b.text) return -1;     return 0 })  $("#my_select").empty().append( my_options ); $("#my_select").val(selected); 

Mozilla's sort documentation (specifically the compareFunction) and Wikipedia's Sorting Algorithm page are relevant.

If you want to make the sort case insensitive, replace text with text.toLowerCase()

The sort function shown above illustrates how to sort. Sorting non-english languages accurately can be complex (see the unicode collation algorithm). Using localeCompare in the sort function is a good solution, eg:

my_options.sort(function(a,b) {     return a.text.localeCompare(b.text); }); 

Answer 2

Modified Tom's answer above slightly so that it actually modifies the contents of the select box to be sorted, rather than just returning the sorted elements.

$('#your_select_box').sort_select_box(); 

jQuery function:

$.fn.sort_select_box = function(){     // Get options from select box     var my_options = $("#" + this.attr('id') + ' option');     // sort alphabetically     my_options.sort(function(a,b) {         if (a.text > b.text) return 1;         else if (a.text < b.text) return -1;         else return 0     })    //replace with sorted my_options;    $(this).empty().append( my_options );     // clearing any selections    $("#"+this.attr('id')+" option").attr('selected', false); }