Dropdown innerHTML not working well in IE?

Question

I am populating a drop down with javascript and its working well in every browser except, of course, Internet Explorer (all versions even 8).

The following is the function which populates the dropdown:

function updateDropDown(divId, dropdownId) {
    var containerDiv = document.getElementById(divId);
    var checkboxes = $('.checkBox');
    var dropDownHTML = "";
    dropdownHTML = document.getElementById(dropdownId).innerHTML;
    document.getElementById(dropdownId).innerHTML = "";

    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            document.getElementById(dropdownId).innerHTML = document.getElementById(dropdownId).innerHTML + "<option value=" + checkboxes[i].id + ">" + checkboxes[i].id + "</option>";
            alert(document.getElementById(dropdownId).innerHTML);
        }
    }
}

Basically, this function gets all class elements with class checkbox, loops through them and populates a dropdown.

The following line:

alert(document.getElementById(dropdownId).innerHTML);

has been added to debug.

In Firefox and other browsers, this is what is displayed, which is the expected output:

<option value="myValue">myValue</option>

In IE, this is the output:

GBP</option>

Does anyone know why is this happening?

Answer 1

Yes i have the same problem with drop down list, you need to create options of your drop down like the following link (it is compatible in all browsers)

http://www.electrictoolbox.com/javascript-add-options-html-select/

hope it helps

Answer 2

Here I am adding values to a dropdownlist using Javascript.Note that these values will not be taken at serverside. Hope this will works for you. Its works at IE too.

function FillDropDownList() {
    var energy = "[['1','FireWood']]"; //JSON FORMAT   
    if (energy != null) {
        ddl = document.getElementById('<%= ddl.ClientID %>');
        var len = ddl.options.length;
        ddl.length = 0;
        document.getElementById('<%= ddl.ClientID %>').options[0] = new Option("--Select--", "0");

        for (i = 0; i < energy.length; i++) {
            document.getElementById('<%= ddl.ClientID %>').options[i + 1] = new Option(energy[i][1], energy[i][0]);
        }
    }
}