javascript - 选择选项的文本在选择后不同

Question

问题

这很难解释，所以请耐心等待。我今天遇到了一个奇怪的场景并解决了，但我不确定我的解决方案为何有效。

我创建了一组选择并编写了一个脚本，通过从其他选择列表中删除所选选项来限制您多次选择相同的选项。

但是在IE(包括IE9)中，选项列表显示错误的选项，但是一旦选择它就会显示正确的选项。

重现错误

在我的第一个脚本中，您可以通过执行以下操作来达到此状态:

注意:这仅适用于 IE。在 Chrome 中运行良好

脚本: http://jsfiddle.net/s6F4h/37/

1. 在第一个下拉菜单中选择 3
2. 在第二个下拉列表中选择 1
3. 在第一个下拉列表中选择 1(不应该是可用选项)
4. 请注意，所选值为 2!
5. 请注意，更改您在第二个下拉列表中选择的值也会产生与显示的值不同的值。
6. 最后，请注意 DOM 正在显示正确的值

修复错误(神奇地)

现在是我通过随机猜测找到的修复程序...

脚本: http://jsfiddle.net/s6F4h/36/

像这样创建我的选择会导致奇怪的行为:

var $S1 = $('<select class="question" />'); 

像这样创建我的选择可以纠正该行为:

var $S1 = $('<select />', {'class': 'question'}); 

跟进

• 以上两个jQuery对象有什么区别？
• IE 究竟如何在其 DOM 中显示一件事而在实际页面上显示另一件事(我知道 CSS content 可以做到这一点，但不涉及 CSS)？如果这只是一个 IE6-8 问题，还不错，但它可以在 IE9 中重现!
• 可能是 IE 错误或 jQuery 错误？

最后，也许我刚刚做了一些非常愚蠢的事情，并且在我的歇斯底里中炮制了一些荒谬的结论。如果我这样做了，请轻轻地通知我。

Answer 1

这两个DOM对象的区别不是数据的问题，而是创建时的操作顺序的问题。

当您使用 $('<select class="blah" />') 的内联时, <select>元素是用已经完好无损的类创建的，并相应地设置了样式。当您使用 $( <select /> , { 'class': 'blah' })` 时，您执行 2 个操作:1) 创建项目，2) 设置它的类。

这看似无害，但它实际上会强制浏览器在应用 CSS 类时重绘元素。

现在 - 在您的场景中，这导致它确实出现的特定问题的事实很明显是一个适用于 IE 的错误 - 但 IE 不应该 表现不佳的事实显然不方式阻止它这样做。

希望这能说明一些问题。