JQuery MVC and Internet Explorer

Question

Hey guys, i have a crazy problem. I have been running my webapp on firefox and it works fine. However, my client will be using internet explorer. I dont think it will work me just saying in order to use this, you have to use firefox so i am trying to correct this damn bug. I have 3 dropdownlists, a parent, a parent/child and a child. And populating these lists is a controller action being called by jquery (i am using 1.4.2) and a function called $.fn.loadselect

$(function () {
    $.fn.loadSelect = function (data) {
        return this.each(function () {
            this.options.length = 0;
            var select = this;
            $.each(data, function (index, itemData) {
                var option = new Option(itemData.Text, itemData.Value);
                $(select).append(option);
            });
        });
    };
});

My controller action is returning a json object, which when a breakpoint is returning the correct action. Now what is happening is the parent dropdownlist is fine. Because the loadselect function is being called to populate it. However, the second dropdownlist parent/child which is controlled by the parent and controls the child, all of the data in the dropdownlist appear as empty strings. Same as the child dropdownlist, all of the data appear as empty strings. This is very frustrating, and when i copy the source from inet explorers view source and open that in inet explorer, everything is fine.

Answer 1

You can use jQueries DOM manipulation to help here:

$(function () {
    $.fn.loadSelect = function (data) {
        return this.each(function () {
            this.options.length = 0;
            var select = this;
            $.each(data, function (index, itemData) {
                var option = $('<option value="'+ itemData.Value +'">' + 
                             itemData.Text +'</option>');
                $(select).append(option);
            });
        });
    };
});