Dropdown list ordering different in IE

Question

I have a dropdown list that is populated by AJAX triggered by onselect of another dropdown. This AJAX calls a webservice which returns a Dictionary, which i then iterate through in jQuery to populate the dropdown list.

The issue i have is that in Chrome, the dropdown list is ordered correctly, but in IE8 the first two options of the dropdown are in the wrong place.

i.e. Instead of the dropdown being:

It is

Has anyone come across this previously? Is it a bug in IE, or is there some reason behind why it occurs? The object which is iterated through is in the correct order, so i can't see why it would go for the 3rd/4th items first.

Code:

function changeProduct($tr) {
    var $product = $tr.find('select.product');
    var $version = $tr.find('select.version');
    var $quantity = $tr.find('input.quantity');
    var dataString = {
        sProductId: $product.val()
    };
    $.ajax({
        type: "POST",
        url: "http://site.com/services/calculator.asmx/getVersionOfProduct",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(dataString),
        dataType: "json",
        success: function(response) {
            var JSON = jQuery.parseJSON(response.d);
            emptyDropdown($version);
            $.each(JSON, function(key, value) {
                $version.append($('<option>').val(key).text(value));
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

Webservice:

Dim dictProducts As IDictionary(Of String, String) = SmsCalculatorProductFunctions.getVersionsForProduct(sProductId)
Dim js As New System.Web.Script.Serialization.JavaScriptSerializer
Dim sb As New StringBuilder
js.Serialize(dictProducts, sb)

Return sb.ToString()

Is `JSON` an object or an array ? I think an object is not garanteed to be ordered. — Pierre de LESPINAY, Jul 03 '13 at 09:38
it is an object, i just find it odd that every other option behaves correctly in IE, and even this option does in Chrome. — Beast-a-tron, Jul 03 '13 at 09:41
I think there is no specific recommendation of implementation for object order so maybe Chrome devs have decided to keep the original order — Pierre de LESPINAY, Jul 03 '13 at 09:45

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

dictProducts will most likely be stringified as an object.

I think you should use an array, because js objects are not ordered.

Please check this SO question
Does JavaScript Guarantee Object Property Order?

edited May 23 '17 at 12:21

Community

1
1

answered Jul 03 '13 at 09:41

Pierre de LESPINAY

40,390
50
195
282

but do you know why something like this would only affect the one option? i was hoping to understand what has caused this – Beast-a-tron Jul 03 '13 at 09:44
sorry, i meant that this dropdown is populate based on the selection in another dropdown. and there is only one option in that original dropdown for which the options in this dropdown aren't in the original order. – Beast-a-tron Jul 03 '13 at 09:48
I think this behavior is not predictable. Maybe tomorrow your dropdowns will not be the same :) – Pierre de LESPINAY Jul 03 '13 at 09:52
looks like it was Chrome that was actually displaying it wrong, as it was ordering based on number instead of insertion. but your answer of putting it in array is best way of ensuring cross browser support i guess. Thanks – Beast-a-tron Jul 03 '13 at 09:58
I though about alpha order but it should be 1, 10, 2, 5 instead of 5, 10, 1, 2 – Pierre de LESPINAY Jul 03 '13 at 10:29

Dropdown list ordering different in IE

1 Answers1