选择后,选择选项的文本会有所不同

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 内容可以做到这一点,但是没有涉及到CSS)？不会那么糟糕,这只是一个IE6-8的东西,但它在IE9中可以重现!
• 它可能是IE错误还是jQuery错误？

最后,也许我刚刚做了一些令人难以置信的愚蠢事情,并且在我的歇斯底里中编造了一些荒谬的结论.如果我这样做的话,请轻轻地通知我.

Answer 1

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

当您使用 inline of 时$('<select class="blah" />')，<select>将使用已完整的类创建元素，并设置相应的样式。当您使用 $( <select />, { 'class': 'blah' })` 时，您执行 2 个操作：1) 创建项目，2) 设置其类。

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

现在 - 在你的场景中，事实上，这导致了它所造成的特定问题，这显然是一个适用于 IE 的错误 - 但 IE 显然不应该表现不佳这一事实决不会阻止它这样做。

希望这能带来一些启发。