I have a select list

<select id="select_zone">
  <option value="north">North</option>
  <option value="east">East</option>
  <option value="south">South</option>
  <option value="west">West</option>
</select>

I have a select list

<select id="select_zone">
  <option value="north">North</option>
  <option value="east">East</option>
  <option value="south">South</option>
  <option value="west">West</option>
</select>

Now I want the items in the list to appear in a sorted manner using jquery. I should be able to add items in the list in the html code manually (in a random order). BUT they should appear alphabetically sorted in the browser page.

I have been breaking my head and have done a lot of R&D. But not being able to find a way to sort the dropdpwnlist at the time the page is loaded. Please help!

• javascript
• jquery
• html
• sorting
• select

• did you look at this? sebastienayotte.wordpress./2009/08/04/… – CodeToad Commented Jun 11, 2013 at 9:39
• possible duplicate of Sorting options elements alphabetically using jQuery - I thought you did research? – George Commented Jun 11, 2013 at 9:39
• Possible duplication of SO stackoverflow./questions/2048762/… – dreamweiver Commented Jun 11, 2013 at 9:41
• My Code is still not working. I am new to jquery. Please could anyone provide a step by step procedure. – user2473532 Commented Jun 11, 2013 at 11:24

3 Answers 3

here is a working fiddle using code from : http://sebastienayotte.wordpress./2009/08/04/sorting-drop-down-list-with-jquery/

http://jsfiddle/Rz6xv/

code:

function sortDropDownListByText() {
    // Loop for each select element on the page.
    $("select").each(function() {

        // Keep track of the selected option.
        var selectedValue = $(this).val();

        // Sort all the options by text. I could easily sort these by val.
        $(this).html($("option", $(this)).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
        }));

        // Select one option.
        $(this).val(selectedValue);
    });
}

write a method and call on document ready()

function sortMybo() {
   $("#select_zone").html($('#select_zone option').sort(function(x, y) {
         return $(x).text() < $(y).text() ? -1 : 1;
   }))
   $("#select_zone").get(0).selectedIndex = 0;
   e.preventDefault();
});

You could use jQuery and something like this:

$("#id").html($("#id option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))