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

by

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

More Related Contents:

  1. Sorting array of object based on range of Numbers of String [closed]
  2. Sort mixed alpha/numeric array
  3. Sorting an Array of JavaScript Objects a Specific Order (using existing function)
  4. Creating a JavaScript global array with static elements?
  5. What is the best way to add options to a select from a JavaScript object with jQuery?
  6. Convert array to JSON
  7. Change the selected value of a drop-down list with jQuery
  8. How to populate a cascading Dropdown with JQuery
  9. jQuery get specific option tag text
  10. How to find if an array contains a specific string in JavaScript/jQuery?
  11. Get the index of the object inside an array, matching a condition
  12. Merge 2 arrays of objects
  13. How to change value of object which is inside an array using JavaScript or jQuery?
  14. How do you remove all the options of a select box and then add one option and select it with jQuery?
  15. Hide select option in IE using jQuery
  16. Sorting arrays numerically by object property value
  17. sort Javascript array by two numeric fields
  18. Merge Two Arrays so that the Values Alternate
  19. Generate unique number within range (0 – X), keeping a history to prevent duplicates
  20. How to keep cascade dropdownlist selected items after form submit?
  21. Convert html table to array in javascript
  22. Convert javascript array to string
  23. Remove duplicate objects from an array using javascript
  24. Javascript – sorting array by multiple criteria
  25. How to get an Array with jQuery, multiple with the same name
  26. Sort a Javascript Array by frequency and then filter repeats
  27. Using jQuery inArray with array of JavaScript Objects
  28. sorting object Sunday to Saturday in javascript
  29. Find object having maximum value for the `id` property in an array of objects
  30. Getting max value(s) in JSON array

Leave a Comment