Select options not showing in IE

Question

I have a dynamically generated select with some options and it shows the options fine in normal browsers, but its empty options in IE. Here's the generated HTML:

<select name="0" id="custom_0" style="border-bottom: #c0cedb 1px solid; border-left: #c0cedb 1px solid; background-color: #ededed; width: 280px; font-size: 0.87em; border-top: #c0cedb 1px solid; border-right: #c0cedb 1px solid">
    <option id="1000" value="0" name="00">1x2GB ECC DDRIII 2GB ECC DDRIII</option>
    <option id="1001" value="10" name="01">2x2GB ECC DDRIII 4GB ECC DDRIII (+10.00 €)</option>
</select>

I can't really show you the javascript, since there's so much of it and I would be able to make it simple just for a demo. Maybe you had some of you would've had a similar experience and could figure this one out. Thanks

I've added some javascript:

$('#custom_order').append('<tr id="custom_'+category+'_row"><td'+padding+'>'+header+'<select id="custom_'+category+'" name="'+category+'" style="background-color:#EDEDED;border:1px solid #C0CEDB;width:280px;font-size:0.87em"></select>'+plusspan+'</td></tr>');

for (var i=0;i<components[category]['value'].length;i++){
    $('#custom_'+category).append('<option id="'+components[category]['value'][i]['id']+'" value="'+components[category]['value'][i]['price']+'"></option>');
    removals(category,i);
    dependencies(category,i);
    selectInput(category);
}
getDiff(category);

getDiff() function adds the values to the options with html() function. The weird thing is, if I alert the html of the option just after the getDiff() function, it shows the value filled out. And it I put the getDiff() function in the for loop where the options are generated, it fills the values and shows them in IE, just not the last one.

I'm calling getDiff() outside the loop for optimization, and since I can add the values later after all the options are generated. Well at least I thought I could, since it works on Firefox and Chrome.

Answer 1

I had the exact same problem where creating options in your select doesn't show in IE.

I couldn't figure out what was going wrong as my code worked fine in FF, so I added FireBug Lite to my page, and tried inspecting the drop down list.

I could see that the options where actaully being created against the drop down list, but that IE was just not displaying them.

This appears to be a rendering issue effecting IE 7 (I havn't tested in any other versions).

What gave it away is that when you inspect your page, FireBug will apply a highlight effect on the control in focus, this highlight actually caused the drop down list to display the missing options.

So I figured that applying a style change to the drop down list should be enough to fix the problem.

$('<option value="1">One</option><option value="2">Two</option>')
.appendTo($('#MyDDL'));
$('#MyDDL').css('display', 'inline'); 

You should now be able to see your options.

Answer 2

I also had this problem. I was using IE 8. I was using a $.each statement to fill my dropdownlist as follows:

$.each(myObject.categories, function (count, item) { $('#ddlCategories').append(new Option(item, count)); });

This worked fine in chrome and FF, but not IE. I switched to:

$.each(myObject.categories, function (count, item) { $('#ddlCategories').append('<option value="' + count + '">' + item + '</option>'); });

and it worked fine in all 3 browsers.