Sorting dropdown list using Javascript

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

But it's probably better to ask why and what you're trying to accomplish.

<select id="foo" size="10">  <option value="3">three</option>  <option value="1">one</option>  <option value="0">zero</option>  <option value="2">two</option></select><script>  // WARN: won't handle OPTGROUPs!  var sel = document.getElementById('foo');  // convert OPTIONs NodeList to an Array  // - keep in mind that we're using the original OPTION objects  var ary = (function(nl) {    var a = [];    for (var i = 0, len = nl.length; i < len; i++)      a.push(nl.item(i));    return a;  })(sel.options);  // sort OPTIONs Array  ary.sort(function(a,b){    // sort by "value"? (numeric comparison)    // NOTE: please remember what ".value" means for OPTION objects    return a.value - b.value;    // or by "label"? (lexicographic comparison) - case sensitive    //return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;    // or by "label"? (lexicographic comparison) - case insensitive    //var aText = a.text.toLowerCase();    //var bText = b.text.toLowerCase();    //return aText < bText ? -1 : aText > bText ? 1 : 0;  });  // remove all OPTIONs from SELECT (don't worry, the original  // OPTION objects are still referenced in "ary") ;-)  for (var i = 0, len = ary.length; i < len; i++)    sel.remove(ary[i].index);  // (re)add re-ordered OPTIONs to SELECT  for (var i = 0, len = ary.length; i < len; i++)    sel.add(ary[i], null);</script>

You can try JQuery sort function for this work --

Try this

HTML CODE -

<select id="ddlList">  <option value="3">Three</option>  <option value="1">One</option>  <option value="1">one</option>  <option value="1">a</option>  <option value="1">b</option>  <option value="1">A</option>  <option value="1">B</option>  <option value="0">Zero</option>  <option value="2">Two</option>  <option value="8">Eight</option></select>

JQUERY CODE -

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

OR

you can also use array sorting for this -

Try This

 var options = $('#ddlList option'); var arr = options.map(function (_, o) { return { t: $(o).text(), v: o.value }; }).get(); arr.sort(function (o1, o2) { return o1.t.toUpperCase() > o2.t.toUpperCase() ? 1 : o1.t.toUpperCase() < o2.t.toUpperCase() ? -1 : 0; });          options.each(function (i, o) {     o.value = arr[i].v;     $(o).text(arr[i].t); });