Whether you are working with select boxes that are generated outside of your control, or trying to implement sorting features in your user interface, you may find it necessary to dynamically reverse the options in a select box.

These select box options are reversed dynamically here with Javascript

The Javascript: 


function reverse_options(select){

    select_box = document.getElementById(select);
    options = select_box.options;    
    var text_array = new Array();
    var value_array = new Array(); 
    var len = options.length;   

    for(var i=0; i<len; i++){ 
        text_array[i] = options[i].text;
        value_array[i] = options[i].value; 
    }    

    text_array.reverse();
    value_array.reverse();  

    for(var o=0; o<len; o++){ 
        options[o].text = text_array[o];
        options[o].value = value_array[o];
    }
}

The HTML

<select id="select">
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
<input type="button" value="Reverse" onclick="reverse_options('select');">

First we get the select box through the DOM and then get an array that contains it's options. Next we iterate through that array and create our own arrays contains the text and values of the options. Finally, we use Javascript's reverse function to reverse those arrays, and write them back into the select box.