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

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

the next code works fine in ff , chrome, not in ie8. have 5 related category select boxes. below code relates selecting category first select box.

in ie8, blank subcategory select box, after selecting category.

in chrome , ff, can browse through categories , 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 confirm selection</a>'); return; } (var = 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 alert out html variable i'm trying append (see alert in above code), 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 utilize 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 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 utilize 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>

not yet aswer, can start 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 1 line,

$("#divmessage, #divselsubsubsubsubsubcategory, #divselsubsubsubsubcategory, #divselsubsubsubcategory, #divselsubsubcategory, #divselsubcategory").css('display','none');

jquery json coldfusion