javascript 选择未在 IE 中显示的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4624120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select options not showing in IE
提问by donk
I have a dynamically generated select with some options and it shows the options fine in normal browsers, but its empty options in IE. Here's the generated HTML:
我有一个带有一些选项的动态生成的选择，它在普通浏览器中显示的选项很好，但在 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>
I can't really show you the javascript, since there's so much of it and I would be able to make it simple just for a demo. Maybe you had some of you would've had a similar experience and could figure this one out. Thanks
我无法真正向您展示 javascript，因为它太多了，我将能够使其简单仅用于演示。也许你们中的一些人会有类似的经历并且可以解决这个问题。谢谢
I've added some 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() function adds the values to the options with html() function. The weird thing is, if I alert the html of the option just after the getDiff() function, it shows the value filled out. And it I put the getDiff() function in the for loop where the options are generated, it fills the values and shows them in IE, just not the last one.
getDiff() 函数使用 html() 函数将值添加到选项中。奇怪的是，如果我在 getDiff() 函数之后提醒该选项的 html，它会显示已填写的值。我将 getDiff() 函数放在生成选项的 for 循环中，它填充值并在 IE 中显示它们，而不是最后一个。
I'm calling getDiff() outside the loop for optimization, and since I can add the values later after all the options are generated. Well at least I thought I could, since it works on Firefox and Chrome.
我在循环外调用 getDiff() 进行优化，因为我可以在生成所有选项后稍后添加值。好吧，至少我认为我可以，因为它适用于 Firefox 和 Chrome。
采纳答案by James Wiseman
Without knowing your JavaScript it's hard to answer this. Can you even give a sample bit of code that demonstrates how the JavaScript is doing the dynamic generation.
不了解您的 JavaScript 就很难回答这个问题。你甚至能给出一个示例代码来演示 JavaScript 如何进行动态生成。
That said, I have encountered issues in this area before now. Generally, it has arisen from specifying the 'options' as the HTML to the select, rather than actuall creating a 'SELECT' DOM element, creating the associated 'OPTIONS' DOM elements and then correctly appending this to the DOM in the correct way.
也就是说，我之前在这方面遇到过问题。通常，它源于将“选项”指定为选择的 HTML，而不是实际创建“选择”DOM 元素，创建关联的“选项”DOM 元素，然后以正确的方式将其正确附加到 DOM。
jQuery ought to hangle this for you, but, again, its difficult to know what your issue is without at least some code.
jQuery 应该为你解决这个问题，但是，如果没有至少一些代码，很难知道你的问题是什么。
回答by mindless
I had the exact same problem where creating options in your select doesn't show in IE.
我遇到了完全相同的问题，即在您的选择中创建选项未显示在 IE 中。
I couldn't figure out what was going wrong as my code worked fine in FF, so I added FireBug Lite to my page, and tried inspecting the drop down list.
由于我的代码在 FF 中运行良好，我无法弄清楚出了什么问题，所以我将 FireBug Lite 添加到我的页面，并尝试检查下拉列表。
I could see that the options where actaully being created against the drop down list, but that IE was just not displaying them.
我可以看到实际上是针对下拉列表创建的选项，但 IE 只是没有显示它们。
This appears to be a rendering issue effecting IE 7 (I havn't tested in any other versions).
这似乎是影响 IE 7 的渲染问题（我没有在任何其他版本中测试过）。
What gave it away is that when you inspect your page, FireBug will apply a highlight effect on the control in focus, this highlight actually caused the drop down list to display the missing options.
给出它的原因是，当您检查页面时，FireBug 会对处于焦点的控件应用高亮效果，这个高亮实际上导致下拉列表显示缺少的选项。
So I figured that applying a style change to the drop down list should be enough to fix the problem.
所以我认为对下拉列表应用样式更改应该足以解决问题。
$('<option value="1">One</option><option value="2">Two</option>')
.appendTo($('#MyDDL'));
$('#MyDDL').css('display', 'inline');
You should now be able to see your options.
您现在应该能够看到您的选项。
回答by Russ Rahn
I also had this problem. I was using IE 8. I was using a $.each statement to fill my dropdownlist as follows:
我也有这个问题。我使用的是 IE 8。我使用 $.each 语句来填充我的下拉列表，如下所示：
$.each(myObject.categories, function (count, item) { $('#ddlCategories').append(new Option(item, count)); });
This worked fine in chrome and FF, but not IE. I switched to:
这在 chrome 和 FF 中运行良好，但不适用于 IE。我切换到：
$.each(myObject.categories, function (count, item) { $('#ddlCategories').append('<option value="' + count + '">' + item + '</option>'); });
and it worked fine in all 3 browsers.
它在所有 3 个浏览器中都运行良好。
回答by David
I've had this problem when I was using innerHTML to insert options generated as text strings. The solution was to do the job properly by appending the options to your select e.g.
当我使用 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 was happy then. (So was I.)
IE当时很高兴。（我也是。）
回答by Rumplin
You are getting this behavior because idand nameattributes are not expected in optiontags by some browsers.
您之所以会出现这种行为，是因为某些浏览器不希望在选项标签中使用id和name属性。
回答by etaion
I had similar problems. After much messing about, following the suggestions given by other respondents I found that the only way to get things to work in IE8 was to build the complete option string and then store it with $(#idOfMyElement).html(some data)
我有类似的问题。经过一番折腾，按照其他受访者给出的建议，我发现在 IE8 中使事情正常工作的唯一方法是构建完整的选项字符串，然后将其与 $(#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>
