javascript - IE 对我的选择语句做了什么？

Question

我遇到过这样一种情况，这些代码行单独工作，但在我将它们放入的结构中却不起作用。至少，在 IE 11 中不是。

如果运行此代码，JS 会根据字母顺序对选择框中的选项重新排序，然后选择最上面的项目。在 Chrome 和 Firefox 中这有效。

在 IE v11 中，元素被重新排序，但顶部项目(“五”)未被选中。更奇怪的是，如果您在 IE 控制台中运行最后一行，它实际上会选择最上面的项目。所以，问题不在于 IE 不理解语法。 那么，它是什么？

(我相信这在 IE 的早期版本中可以正常工作，但我不确定。)

$('#it option').sort(function(a,b){
	return ( $(a).text() > $(b).text() ) ? 1 : -1;
}).appendTo( $('#it') );

$('#it option')[0].selected = 'selected';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="it">
	<option val="0">zero</option>
	<option val="1">one</option>
	<option val="2">two</option>
	<option val="3">three</option>
	<option val="4">four</option>
	<option val="5">five</option>
	<option val="6">six</option>
</select>

最后一行 $('#it option')[0].selected = 'selected'; 当然会在所有浏览器中执行，至少如果你放一个 console.log () 在它之前和之后你会看到它们输出到控制台。那么这种IE不喜欢的结构到底是怎么回事呢？

---

到目前为止建议的一些答案仍然不起作用:

这些解决方案仍然存在无法在 IE (v11) 中按预期运行的完全相同的问题。

1. 更改行:$('#it option')[0].selected = 'selected';至:$('#it option')[0].prop('selected',true);

2. 更改行:}).appendTo( $('#it') );到:}).detach().appendTo($('#it'));

Answer 1

这真的很奇怪。我无法解释它，但我找到了两种解决方法:

1. 在超时时运行“select”代码(因此它会在下一个 tick 运行)
2. 使用 jQuery 的 .prop

那就是:

$('#it option').sort(function(a,b){
  return ( $(a).text() > $(b).text() ) ? 1 : -1;
}).appendTo( $('#it') );

$('#it option:eq(0)').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="it">
	<option val="0">zero</option>
	<option val="1">one</option>
	<option val="2">two</option>
	<option val="3">three</option>
	<option val="4">four</option>
	<option val="5">five</option>
	<option val="6">six</option>
</select>

或者:

$('#it option').sort(function(a,b){
  return ( $(a).text() > $(b).text() ) ? 1 : -1;
}).appendTo( $('#it') );

setTimeout(
  function() { $('#it option')[0].selected = 'selected'; }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="it">
	<option val="0">zero</option>
	<option val="1">one</option>
	<option val="2">two</option>
	<option val="3">three</option>
	<option val="4">four</option>
	<option val="5">five</option>
	<option val="6">six</option>
</select>