從javascript中選擇選項不會在Chrome中停止工作

Question

我在選擇組中設置了選定選項，但這隻適用於前幾次。這似乎只是Chrome中的一個問題。我如何在Chrome中完成這項工作？

在下面的示例中，按幾次1和2按鈕，您可以看到它停止在Chrome中工作，但繼續在IE中工作。

https://jsfiddle.net/beerkensp/3ej6980x/

<input type="button" id="button" value="1" /> 
<input type="button" id="button2" value="2" /> 

<select class="form-control" id="mySelect" size="4"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

var onClick = function() { 
     var $buttonVal=$(this).val(); 
    $('#mySelect option').each (function() { 
     //alert ($(this).val()); 
     if ($(this).val()==$buttonVal) 
     { 
     $(this).attr ("selected",true); 
     } else 
     { 
     $(this).attr ("selected",false); 
     } 
    }) 
}; 

$('#button').click(onClick); 
$('#button2').click(onClick); 

Answer 1

您需要使用.prop()，而不是attr()

這裏是一個更新的JS Fiddle

var onClick = function() { 
 
    var $buttonVal = $(this).val(); 
 
    $('#mySelect option').each(function() { 
 
    //alert ($(this).val()); 
 
    if ($(this).val() == $buttonVal) { 
 
     $(this).prop("selected", true); 
 
    } else { 
 
     $(this).prop("selected", false); 
 
    } 
 
    }) 
 
}; 
 

 
$('#button').click(onClick); 
 
$('#button2').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="button" value="1" /> 
 
<input type="button" id="button2" value="2" /> 
 

 
<select class="form-control" id="mySelect" size="4"> 
 
    <option value="0">0</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select>