Select options not showing in IE

问题:

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.

回答1:

Without knowing your JavaScript it's hard to answer this. Can you even give a sample bit of code that demonstrates how the JavaScript is doing the dynamic generation.

That said, I have encountered issues in this area before now. Generally, it has arisen from specifying the 'options' as the HTML to the select, rather than actuall creating a 'SELECT' DOM element, creating the associated 'OPTIONS' DOM elements and then correctly appending this to the DOM in the correct way.

jQuery ought to hangle this for you, but, again, its difficult to know what your issue is without at least some code.

回答2:

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.

回答3:

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.

回答4:

I've had this problem when I was using innerHTML to insert options generated as text strings. The solution was to do the job properly by appending the options to your select e.g.

var optionRow = document.createElement("option");
optionRow.setAttribute("value", varName1);
var textNode = document.createTextNode(varName2);
optionRow.appendChild(textNode);
document.getElementById("id_of_select").appendChild(optionRow);

IE was happy then. (So was I.)

回答5:

You are getting this behavior because id and name attributes are not expected in option tags by some browsers.

回答6:

I had similar problems. After much messing about, following the suggestions given by other respondents I found that the only way to get things to work in IE8 was to build the complete option string and then store it with $(#idOfMyElement).html(some data)

> <select id='mySelect'>
>     <option>Dummy placeholder</option>  
   </select>
> 
> <script type='text/javascript'>
> 
>     $.ajaxSetup({cache: false});    // Or next time IE will not run your script
> 
>     function setOption(...) {
>        ...
>        data = ' ... ';
>        $('#mySelect').html(data);
>        ...
>     }  </script>