Question

我有一个带有一些选项的动态生成的选项，它在普通浏览器中显示选项很好，但它在IE中是空的选项。这是生成的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>

我无法真正向您展示javascript，因为它有很多，我可以简单地为演示做简单。也许你有一些人会有类似的经历，可以想出这个。感谢

我添加了一些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（）函数使用html（）函数将值添加到选项中。奇怪的是，如果我在getDiff（）函数之后提示选项的html，它会显示填写的值。并且我将getDiff（）函数放在生成选项的for循环中，它填充值并在IE中显示它们，而不是最后一个。

我在循环外调用getDiff（）进行优化，因为我可以在生成所有选项后添加值。好吧，至少我认为我可以，因为它适用于Firefox和Chrome。

Answer 1

我有一个完全相同的问题，即在你的选择中创建选项不会在IE中显示。

由于我的代码在FF中工作正常，我无法弄清楚出了什么问题，所以我将FireBug Lite添加到了我的页面，并尝试检查下拉列表。

我可以看到在下拉列表中正在创建的选项，但IE只是没有显示它们。

这似乎是影响IE 7的渲染问题（我没有在任何其他版本中测试过）。

当您检查页面时，FireBug会对焦点控件应用高亮效果，这个亮点实际上导致下拉列表显示缺少的选项。

所以我认为将样式更改应用到下拉列表应该足以解决问题。

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

您现在应该可以看到您的选择。

Answer 2

我也有这个问题。我使用的是IE 8.我使用$ .each语句来填充我的下拉列表，如下所示：

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

这在chrome和FF中运行良好，但不是IE。我转到：

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

它在所有3种浏览器中都运行良好。

Answer 3

在不知道您的JavaScript的情况下，很难回答这个问题。您是否可以提供一些代码示例，演示JavaScript如何进行动态生成。

那就是说，我之前遇到过这方面的问题。通常，它是通过将'options'指定为选择的HTML而不是实现创建'SELECT'DOM元素，创建关联的'OPTIONS'DOM元素，然后以正确的方式正确地将其附加到DOM。

jQuery应该为你解决这个问题，但是，如果没有至少一些代码，很难知道你的问题是什么。

Answer 4

当我使用innerHTML插入作为文本字符串生成的选项时，我遇到了这个问题。解决方案是通过将选项附加到您的选择中来正确地完成工作。

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很开心。（我也是。）

Answer 5

您收到此行为是因为某些浏览器不会在选项标记中使用 id 和名称属性。

Answer 6

我有类似的问题。经过多次搞乱后，根据其他受访者提出的建议，我发现在IE8中让事情发挥作用的唯一方法是构建完整的选项字符串，然后用$（＃idOfMyElement）.html（某些数据）存储

> <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>

选择未在IE中显示的选项

6 个答案: