Question

My problem:

I know it may sound funny, but here’s my problem: I have a select that is populated through Ajax on success in the following way:

$.each(data, function(key, value) {
            options += '<option value="' + key + '">' + value + '</option>';
        });

My server returns a sorted map (sorted by value). All works fine, but in Internet Explorer (7,8 and 9) the select appears unsorted.

What I’ve found :

What I’ve found is that IE actually displays it sorted by the key I am passing to the value parameter. My list is sorted on the back-end by value, and I want to display it like that (working fine on Chrome, Firefox, etc).

I am thinking that most probably the cause of this sorting is the $.each jQuery function. Maybe it is iterating by the key? I am not sure about this, though, so I would like some feedback. Also, how can I make an alternative iteration on the map, to make sure of this? I am trying to avoid to perform a jQuery sorting, as the sorting is done in the back-end.

I am mentioning that I need the key and value passed to the option the way that I am passing them.

Edit – an example:

How it should be (and is on Chrome and Firefox):

<option value="13">A</option>
<option value="2">B</option>
<option value="55">C</option>

How it is in IE:

<option value="2">B</option>
<option value="13">A</option>
<option value="55">C</option>

Answer 1

Your problem is that objects don’t actually have a specific ordering of key/value pairs. IE is not wrong in changing it. Use an array to hold the pairs instead, something like:

[
    {
        "value": "13",
        "text": "A"
    },
    {
        "value": "2",
        "text": "B"
    },
    {
        "value": "55",
        "text": "C"
    }
]

And loop through it as follows:

$.each(data, function(index, option) {
    options += '<option value="' + option.value + '">' + option.text + '</option>';
});

Finally, you shouldn’t manipulate HTML as a string to build elements. Use the DOM. I imagine you have someElement.html(options); somewhere? Well instead, make options = someElement;, and do this:

$.each(data, function(index, option) {
    options.append(
        $('<option>').prop('value', option.value).text(option.text)
    );
});