IE用我的select语句做什么？

Question

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

如果您运行此代码，JS会根据字母顺序重新排序选择框中的选项，然后选择顶部项目。在Chrome和Firefox中，这可行。

在IE v11中，元素会重新排序，但顶部项目（“5”）不会被选中。更奇怪的是，如果你在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'代码（因此它会在下一个时刻运行）
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，它在排序的选择框中是＆＃34;零＆＃34;选项。我的代码如下：

$('#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>