How to show <Select > in sorted order

Question

How can I sort the <option> elements of a <select> tag using JavaScript?

Here is the HTML I have:

<form action="example.asp">
<div>
<select size="3">
<option value="op2" >Option 2</option>
<option value="op1">Option 1</option>
<option value="op4">Option 4</option>
<option value="op3">Option 3</option>

</select>
</div>
</form> 

Answer 1

<script language="JavaScript" type="text/javascript">
function sortlist() {
var lb = document.getElementById('mylist');
arrTexts = new Array();

for(i=0; i<lb.length; i++)  {
  arrTexts[i] = lb.options[i].text;
}

arrTexts.sort();

for(i=0; i<lb.length; i++)  {
  lb.options[i].text = arrTexts[i];
  lb.options[i].value = arrTexts[i];
}
}
</script>


<form action="#">
<select name=mylist id=mylist size=5>
<option value="Anton">Anton
<option value="Mike">Mike
<option value="Peter">Peter
<option value="Bill">Bill
<option value="Carl">Carl
</select>
<br>
<a href="javascript:sortlist()">sort</a>
</form>

Answer 2

This little bit of algorithmic wizardry should do the trick:

<form action="example.asp">
<div>
<select size="3">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
<option value="op4">Option 4</option>

</select>
</div>
</form> 

Answer 3

You should think about it on the pre html-creation level. If you are generating them from some kind of list or by dynamic page mechanism then sort them before you generate your option elements - thats the clearest way ;)

Answer 4

You can sort an array by properties of the objects. Let's consider this sample markup:

<select name="mySelect" id="mySelect>
  <option id="opt3" value="val3">Value 3</option>
  <option id="opt1" value="val1">Value 1</option>
  <option id="opt2" value="val2">Value 2</option>
</select>

And now let's look at a Javascript function that will sort the options of any <select>:

function sortOptionsByValue(x,y) {
    // we are dealing with an options array, so the x and y args
    // represent option elements; and we are going to sort by their value
    return (x.value == y.value) ? 0 : (x.value > y.value) ? 1 : -1;  
}

Then all we have to do is

var mySel = document.getElementById('mySelect');
mySel.options = mySel.options.sort(sortOptionsByValue);

and our options are sorted.

EDITED TO FIX TYPO: mySel.sort => mySel.options.sort