Problem in IE with jQuery JSON append() to select control

Question

The following code works fine in FF and Chrome, but not in IE8. I have 5 related category select boxes. The below code relates to selecting a category from the first select box.

In IE8, I get a blank subcategory select box, after selecting a category.

In Chrome and FF, I can browse through categories and subcategories normally

CODE

$(function() {

        $("#SelCategory").live("change", function(e) {
            $("#divMessage").css('display','none');
            $("#divSelSubSubSubSubSubcategory").css('display','none');
            $("#divSelSubSubSubSubcategory").css('display','none');
            $("#divSelSubSubSubcategory").css('display','none');
            $("#divSelSubSubcategory").css('display','none');
            $("#divSelSubcategory").css('display','none');

            var id = $(this).val().toString(); 
            $("select#selSubcategory").html("");

            $.getJSON("/chinabuy/cfcs/com.cfc?method=getSubcategories&returnformat=json",{"category_id":id,"for_select":true,"for_catbrowse":true},function(res,code){
                var html = '';
                var len = parseInt(res.DATA.length);
                if(len < 1){
                    $("#divMessage").css('display','block');
                    $("#divMessage").html('No more subcategories. <a href="##" id="confirmedCat_' + id + '">Click here to confirm your selection</a>');
                    return;
                }
                for (var i = 0; i<len; i++) {
                    var str = res.DATA[i].toString();
                    var id = str.split(",")[0];
                    var value = str.split(",")[2]; 
                    html += "<option value='" + id + "'>" + value + "</option>";
                }
                alert(html);
                $('select#selSubcategory').append(html);
                $("#divSelSubcategory").css('display','inline');    
            });
            e.preventDefault()
        })

If I alert out the html variable I'm trying to append (see alert in above code), I get the following:

<option value='1048'>Adhesives & Sealants</option><option value='1044'>Agrochemical Intermediates</option><option value='1045'>Agrochemicals & Pesticides Products</option><option value='1042'>Basic Organic Chemicals</option><option value='1051'>Catalysts & Chemical Auxiliary Agents</option><option value='1062'>Chemical Process Equipment</option><option value='1057'>Chemical Reagent Products</option><option value='1056'>Daily Use Chemicals</option><option value='1058'>Explosives</option><option value='1059'>Extract Chemicals</option><option value='1046'>Fertilizer</option><option value='1054'>Flavour & Fragrance</option><option value='1050'>Food & Feed Additives</option><option value='1041'>Inorganic Chemicals</option><option value='1061'>Lab Supplies</option><option value='1049'>Organic Intermediates</option><option value='1063'>Other Chemical & Related Services</option><option value='1052'>Paint & Coatings</option><option value='1043'>Petrochemicals</option><option value='1047'>Pharmaceutical Chemicals</option><option value='1053'>Pigment & Dyestuff</option><option value='1055'>Polymers</option><option value='1060'>Printing Inks</option><option value='1186'>Textile Stocks</option>

JSON returns as follows:

{"COLUMNS":["RECORD_ID","CATEGORY_ID","SUBCATEGORY"],"DATA":[[1048,30,"Adhesives & Sealants"],[1044,30,"Agrochemical Intermediates"],[1045,30,"Agrochemicals & Pesticides Products"],[1042,30,"Basic Organic Chemicals"],[1051,30,"Catalysts & Chemical Auxiliary Agents"],[1062,30,"Chemical Process Equipment"],[1057,30,"Chemical Reagent Products"],[1056,30,"Daily Use Chemicals"],[1058,30,"Explosives"],[1059,30,"Extract Chemicals"],[1046,30,"Fertilizer"],[1054,30,"Flavour & Fragrance"],[1050,30,"Food & Feed Additives"],[1041,30,"Inorganic Chemicals"],[1061,30,"Lab Supplies"],[1049,30,"Organic Intermediates"],[1063,30,"Other Chemical & Related Services"],[1052,30,"Paint & Coatings"],[1043,30,"Petrochemicals"],[1047,30,"Pharmaceutical Chemicals"],[1053,30,"Pigment & Dyestuff"],[1055,30,"Polymers"],[1060,30,"Printing Inks"],[1186,30,"Textile Stocks"]]}

HTML

<div id="divSelCategory" style="display:inline">
    <select id="SelCategory" size="10" style="width:180px" name="SelCategory">
        <cfloop query="qCategories">
            <option value="#qCategories.category_id#">#qCategories.category#</option>
        </cfloop>
    </select>
</div>

<div id="divSelSubcategory" style="display:none">
    <select id="SelSubcategory" size="10" style="width:180px" name="SelSubcategory"> </select>
</div>
<div id="divSelSubSubcategory" style="display:none">
    <select id="SelSubSubcategory" size="10" style="width:180px" name="SelSubSubcategory"> </select>
</div>
<div id="divSelSubSubSubcategory" style="display:none">
    <select name="SelSubSubSubcategory" size="10" style="width:180px" id="SelSubSubSubcategory"> </select>
</div>
<div id="divSelSubSubSubSubcategory" style="display:none">
    <select id="SelSubSubSubSubcategory" size="10" style="width:180px" name="SelSubSubSubSubcategory"> </select>
</div>
<div id="divSelSubSubSubSubSubcategory" style="display:none">
    <select id="SelSubSubSubSubSubcategory" size="10" style="width:180px" name="SelSubSubSubSubSubcategory"> </select>
</div>
<div id="divMessage" style="display:none"></div>

Answer 1

not yet an aswer, but we can start by minimizing these lines,

$("#divMessage").css('display','none');
$("#divSelSubSubSubSubSubcategory").css('display','none');
$("#divSelSubSubSubSubcategory").css('display','none');
$("#divSelSubSubSubcategory").css('display','none');
$("#divSelSubSubcategory").css('display','none');
$("#divSelSubcategory").css('display','none');

into just one line,

$("#divMessage, #divSelSubSubSubSubSubcategory, #divSelSubSubSubSubcategory, #divSelSubSubSubcategory, #divSelSubSubcategory, #divSelSubcategory").css('display','none');

Answer 2

It appears that IE is having issues with jQuery append. It appears that it is an issue with append() not working on hidden elements in IE 8. Can you try displaying it first? (switch the display line with the append line)

http://forum.jquery.com/topic/problem-with-append-elem-method-in-ie8

Answer 3

Resolved: select#selSubcategory should be select#SelSubcategory IE is the most case-sensitive of all browsers it appears.