Select options that do not appear in IE

Question

I have a dynamically generated selection with some parameters, and it shows the parameters in regular browsers, but its options are empty in IE. Here is 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 show you javascript since there are so many of it, and I could make it simple just to demonstrate. Perhaps you had some of you, you would have had a similar experience, and you could understand that. Thanks

I 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); 

Function

getDiff () adds values ​​to parameters using the html () function. Strange, if I warn the html option immediately after the getDiff () function, it shows the filled value. And I put the getDiff () function in a for loop, where the parameters are generated, it fills the values ​​and shows them in IE, not in the last one.

I call getDiff () outside the loop to optimize, and since I can add values ​​later after creating all the parameters. Well, at least I thought I could, since it works on Firefox and Chrome.

Answer 1

Without knowing your JavaScript, it is difficult to answer this question. Can you even give an example of code that demonstrates how JavaScript performs dynamic generation.

However, I ran into problems in this area before that. Typically, it arose from specifying “options” as HTML to choose from, rather than creating a “SELECT” DOM element, creating related “DOM OPTIONS” DOM elements, and then properly adding it to the DOM.

jQuery should gold this out for you, but again, it's hard to figure out what the problem is, at least with some code.

Answer 2

I had the same problem when making settings in your element does not appear in IE.

I could not understand what was going wrong, as my code worked fine in FF, so I added FireBug Lite to my page and tried to check the drop-down list.

I could see that the parameters that actaully are created in the drop-down list, but this IE just did not display them.

This seems to be a rendering problem affecting IE 7 (I have not tested it in any other versions).

What this gave is that when you check your page, FireBug will apply a highlight effect to the control in focus, this event actually caused the dropdown to display the missing options.

So, I realized that to change the problem of applying style in the drop-down list should be enough.

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

Now you can see your options.

Answer 3

I also had this problem. I used IE 8. I used the $ .each statement to populate my drop-down list as follows:

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

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

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

and it worked fine in all three browsers.

Answer 4

I had this problem when I used innerHTML to insert options generated as text strings. The solution was to do the job properly by adding options to your choice, for example.

 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. (I also.)

Answer 5

You get this behavior because in some browsers the id and name tags are not expected in the tags .

Answer 6

I had similar problems. After much thought, following the recommendations of other respondents, I found that the only way to get things to work in IE8 is to build a full line of options and then save it using $ (# 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>