how to sort select options based on values using pure Javascript?

Question

On a JSP page I have a following declaration:

<html:select property="filterBookingTargetId" styleClass="input_middle" >
    <html:option value="0">-all-</html:option>
    <html:options collection="bookTargetTypes" property="key" labelProperty="value"/> 
</html:select>

where collection bookTargetTypes is a set of key-value (int, String) pairs implemented in Java as a HashMap and read by a server.

If I could use jQuery, I would implement it similarly to answers present on the Stack discussion here . Unfortunately, I can't; nor can I sort those values before they are uploaded to the server ie in Java, on the code level.

The underlying question is, how in pure JavaScript can I refer to bookTargetTypes collection to sort them alphabetically before they are shown on the page?

Example values of " bookTargetTypes " collection, after they are rendered on the page, are shown below:

<html:option value="5">bbb</html:option>
<html:option value="13">ccC</html:option>
<html:option value="1">Aaa</html:option>

[UPDATE]

    <script language="javascript">

function sortOptions() {
var options = document.getElementById('myselect').options;
var optionsArray = [];
for (var i = 0; i < options.length; i++) {
    optionsArray.push(options[i]);
}
optionsArray = optionsArray.sort(function (a, b) {           
    return a.innerHTML.toLowerCase().charCodeAt(0) - b.innerHTML.toLowerCase().charCodeAt(0);    
});

for (var i = 0; i <= options.length; i++) {            
    options[i] = optionsArray[i];
}
options[0].selected = true;
}

sortOptions();
</script>

<input type="hidden" name="method" value="listSettlementFiles">
<input type="hidden" name="pageNo" value="">
<input type="hidden" name="countPerPage" value="">
<input type="hidden" name="sc" value="">

<div class="search_bar" id="search" name="search_div">
    <table align="center" width="100%">
        <tr>
            <td align="center">
                <LABEL>Name of channels</LABEL>
                <select name="filterBookingTargetId" id="myselect" class="input_middle">
                <option value="17">Baa</option>
                <option value="15">Paa</option>
                <option value="2">Saaa</option>
                <option value="9">Daaa</option>
                <option value="6">Naaa</option>
                <option value="1">Eaaa</option>
                <option value="14">Sdda</option>
                <option value="7">Raaa</option>
                <option value="22">Pdddaa</option>
                </select>

Answer 1

You can not refer to bookTargetTypes after the page is rendered.

And if you can not use jQuery, you can only replicate the jQuery behavior using pure javascript.

You can write a onload script which will get triggerred after the page is loaded. In that script you can reorder the options of the particular select element.

Answer 2

Well, since you said you can't use jquery or can't modify java code. Here is a pure javascript solution. It would be better if you give an id for your select. You can save the options in an array and then use sort function by comparing first letter charcode of innerHTML inside each option.

in your HTML give an id

<html:select id="myselect" property="filterBookingTargetId" styleClass="input_middle" >
    <html:option value="0">-all-</html:option>
    <html:options collection="bookTargetTypes" property="key" labelProperty="value"/> 
</html:select>

javascript

function sortOptions() {
    var options = document.getElementById('myselect').options;
    var optionsArray = [];
    for (var i = 0; i < options.length; i++) {
        optionsArray.push(options[i]);
    }
    optionsArray = optionsArray.sort(function (a, b) {           
        return a.innerHTML.toLowerCase().charCodeAt(0) - b.innerHTML.toLowerCase().charCodeAt(0);    
    });

    for (var i = 0; i <= options.length; i++) {            
        options[i] = optionsArray[i];
    }
    options[0].selected = true;
}

sortOptions();

click here for Fiddle Demo