How to show <Select > in sorted order

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"&g开发者_如何学运维t;
<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> 

If the value is different than the text, use the following function to sort both of them. This is just an updated version of above solution and will keep both the name and associated value.

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

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

    arrTexts.sort(); 

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

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

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

A simpler solution, building on Yasir Al-Agl's answer:

function sortList() 
{ 
    var lb = document.getElementById('mylist'); 
    arr = new Array(); 

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

    arr.sort(function(a,b) {
        return (a.text > b.text)? 1 : ((a.text < b.text)? -1 : 0);
    });  // or use localeCompare() if you prefer

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

In short, you need only one Array, the elements of which are simply references to the original "options" Objects. The sort() function also has the freedom to choose which option property to sort on (ie, the text property, the value property, etc).

Don't forget, however, that the "selectedIndex" property of the "select" control may no longer be correct after the sort.

This function works as in the last answer, but also keeps the selection of item

// Sorts all entries of a select item (= dropdown) by their visible name, keeping the internal values and the selection
function sortSelectEntries(selItem) {
    let formerSel = selItem.value;
    let count = selItem.length;
    let options = new Array();
    for (var i = 0; i < count; i++)
        options[i] = selItem.options[i];
    options.sort((e1, e2) => e1.text > e2.text ? 1 : (e1.text < e2.text ? -1 : 0));
    for (i = 0; i < count; i++)
        selItem.options[i] = options[i];
    selItem.value = formerSel; // restore selection
}