Sorting options elements alphabetically using jQuery

The breakdown: Understanding the journey of an <option>

1. Gathered: All <option> elements morph into a jQuery object.
2. Sort: Enter the sort() method, equipped with a comparator function.
3. LocaleCompare: This powerful tool ensures accurate sorting across different languages.
4. Clean slate: The <select> is emptied to avoid duplicates.
5. Comeback: Sorted <option> elements re-enter the <select> stage.

Dealing with complexities: Maintaining the peace in advanced scenarios

User selection: Like a cat, lands on its feet

Keep the selected value safe with this smart tweak:

var $select = $('#mySelect');
var selectedVal = $select.val(); // Store it like a squirrel with a nut.
$options.sort((a, b) => $(a).text().localeCompare($(b).text()));
$select.empty().append($options).val(selectedVal); // And there it is, right where we left it.


Custom attributes & classes: Not left behind

Preserve those extra details. Work smarter with .appendTo().

$options.sort((a, b) => $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase()))
         .appendTo($select);


User-triggered: Sorting at will

Sort in response to user events:

$('#sortButton').click(function() {
  sortSelectOptions('#mySelect'); // A button click sorts... like magic.
});

function sortSelectOptions(selector) {
  var $select = $(selector);
  var $options = $select.find('option');
  $options.sort((a, b) => $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase()))
          .appendTo($select);
}


Backward Compatibility: Embrace the old

Embodying inclusivity, when .empty() feels too modern for IE11:

$('#mySelect').empty().append($options);


Efficiency with style: Embrace modern syntax

ES6 syntax can expedite the code performance and readability:

const $select = $('#mySelect');
const selected = $select.val();
const $sortedOptions = $select.find('option').toArray().sort((a, b) => 
  $(a).text().localeCompare($(b).text())
).map(el => el.outerHTML).join('');

$select.html($sortedOptions).val(selected);


This power-packed code includes arrow functions, .toArray(), .map(), and template literals.

Interactive learning: A JsFiddle playground

A jsFiddle demo is available here to let you interact, experiment and further explore the power of sorting with jQuery.

Custom jQuery Plugin

Advance to jQuery plugin for reusability and code-cleanliness:

$.fn.sortSelect = function() {
  this.each(function() {
    var $select = $(this);
    var $options = $select.find('option');
    var selectedVal = $select.val(); // Feels familiar? Yes, we're preserving the selection.
    
    $options.sort((a, b) => $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase()))
            .appendTo($select.val(selectedVal));
  });
  return this;
};

// Usage:
$('select').sortSelect(); // Isn't this neat?
