What does IE do with my select clause?

Question

I came across a situation where individually, these lines of code work, but in the structure in which I put them, no. At least not in IE 11.

If you run this code, JS reorders the options in the selection box in alphabetical order, and then selects the top item. In Chrome and Firefox, this works.

In v11, elements are reordered, but the top element ('five') is not selected. Even stranger, if you run the last line in the IE console, it actually selects the top item. So the problem is not that IE does not understand the syntax. So what is it?

(I believe this worked as expected in previous versions of IE, but I'm not sure.)

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

Run code

$('#it option')[0].selected = 'selected';, , , , console.log() , . , IE ?

---

, , :

- , IE (v11) .

• : $('#it option')[0].selected = 'selected'; to: $('#it option')[0].prop('selected',true);

• : }).appendTo( $('#it') ); to: }).detach().appendTo( $('#it') );

Answer 1

, selectIndex. selectedIndex 6 IE11, "" . :

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

. , :

• "select" - ( )
• 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 3

The problem is reordering the elements. You can disconnect them, and then return them back, and control will be displayed again.

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

Run code