选择未在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'); 

您现在应该能够看到您的选择.

Answer 2

如果不了解 JavaScript，就很难回答这个问题。您甚至可以提供一段示例代码来演示 JavaScript 如何进行动态生成吗？

也就是说，我之前遇到过这方面的问题。一般来说，它是由于将“选项”指定为选择的 HTML 而产生的，而不是实际创建“SELECT”DOM 元素，创建关联的“OPTIONS”DOM 元素，然后以正确的方式将其正确附加到 DOM。

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