javascript - 选择未在 IE 中显示的选项

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

您现在应该能够看到您的选项。