Sort Options in HTML Select

Question

There is situation like this:

<select id="trollSelect">
    <option value="PL">Polish Troll</option>
    <option value="EN">English Troll</option>
    <option value="JP">Japanese Troll</option>
    [...] //more options created dynamically
</select>

Option values and Option texts are unsorted in Select. Is this possible to sort this options in JQuery or Javascript by value or text alphabetically ??

The result should be like that:

<select id="trollSelect">
    <option value="EN">English Troll</option>
    <option value="JP">Japanese Troll</option>
    <option value="PL">Polish Troll</option>
    [...] //more options created dynamically
</select>

see http://stackoverflow.com/questions/45888/what-is-the-most-efficient-way-to-sort-an-html-selects-options-by-value-while — Tamil Selvan C, May 28 '14 at 09:39
http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery — konghou, May 28 '14 at 09:41
OK, it seems to be good, but didactically I keep this link http://jsfiddle.net/uVrML/2/ too :) — user3383675, May 28 '14 at 09:48

score 5 · Answer 1 · answered May 28 '14 at 10:00

This code should do it. I've sorted them on their values but this can also be used to sort based on the text.

$(document).ready(function() {
    var opt = $("#trollSelect option").sort(function (a,b) { return a.value.toUpperCase().localeCompare(b.value.toUpperCase()) });
    $("#trollSelect").append(opt);
});

Here's a fiddle for the same

Sort Options in HTML Select

1 Answers1

Linked