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 i. e. 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>

Amit.rk3 · Accepted Answer · 2015-07-14T12:22:51.410

3

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

edited Jul 14 '15 at 12:22

answered Jul 14 '15 at 12:08

Amit.rk3

2,417
2
10
16

@cbx44 : Can you post the generated HTML source, by doing view source on your page? – Amit.rk3 Jul 15 '15 at 09:08
Sure, I will add it in the answer below because it is too long. I have spotted one issue: instead of id='myselect' putting styleId='myselect' generates a proper tag in html but still the problem occurs. – cbx44 Jul 15 '15 at 09:13
I changed my post to [update] . Sorting does not occur because `sortOptions()` function is not called on the site. I wonder why Javascript is not loaded, because when I call `sortOptions()` from Firebug console, everything is perfectly O.K --> values are sorted. On the JSfiddle site an `onLoad()` is used; here not. Is this a problem? – cbx44 Jul 15 '15 at 09:30
@cbx44 : yes.. call this function on window.onload, like `window.onload=sortOptions();` – Amit.rk3 Jul 15 '15 at 10:22
Thanks @Amit.rk3 for help, on Firefox everything is fine now. It's only a pity that IE7 does not recognize `window.onload`. When I try different attributes with `select` tag like `onclick` or `onmousedown` still the script is not loaded. Do you have any hints what might work? – cbx44 Jul 15 '15 at 12:16
@cbx44 , IE7? are you still using that ? – Amit.rk3 Jul 15 '15 at 14:31

score 0 · Answer 2 · answered Jul 14 '15 at 11:54

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.

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

2 Answers2

Linked