我有一个动态生成的选择,其中包含一些选项,它在普通浏览器中显示选项很好,但在 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。
我遇到了完全相同的问题,即在选择中创建选项不会在 IE 中显示。
我无法弄清楚出了什么问题,因为我的代码在 FF 中运行良好,因此我将 FireBug Lite 添加到我的页面,并尝试检查下拉列表。
我可以看到这些选项实际上是根据下拉列表创建的,但 IE 只是不显示它们。
这似乎是影响 IE 7 的渲染问题(我没有在任何其他版本中进行过测试)。
泄露的信息是,当您检查页面时,FireBug 会对焦点控件应用突出显示效果,这种突出显示实际上导致下拉列表显示缺少的选项。
所以我认为对下拉列表应用样式更改应该足以解决问题。
$('<option value="1">One</option><option value="2">Two</option>')
.appendTo($('#MyDDL'));
$('#MyDDL').css('display', 'inline');
您现在应该能够看到您的选项。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)