IE 对我的 select 语句做了什么？

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. 超时运行“选择”代码（因此它会在下一个滴答声中运行）
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>

Answer 2

简短的回答是，这似乎是 selectedIndex 的问题。下面记录了 IE11 中的 selectedIndex 6，在排序的选择框中是“零”选项。我的代码如下：

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

$('#it option')[0].selected = 'selected';
console.log($('#it')[0].selectedIndex);  //logs 6

我找到了两种解决方法：

$('#it')[0].selectedIndex=0;
$("#it").val($("#it option")[0].text);

Answer 3

问题在于重新排序元素。您可以分离它们，然后将它们放回去，控件将重新呈现。

$('#it option').sort(function(a,b){
	return ( $(a).text() > $(b).text() ) ? 1 : -1;
}).detach().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>