用Javascript更新选项后刷新HTML选择

Question

我有一个<select>，当点击它时，它会用Ajax进行更新。但是，如果单击<option>的数量与单击后的<option>数量不同，则下拉列表不会展开/收缩以适应这些选项。如何刷新<select>以使其适应<option>的要求？

这里有一个小提琴，演示了这一点：http://jsfiddle.net/q6qp4xLe/

​

$('#t').click(function(){
   $(this).empty();
   for(var i=0;i<5;i++)
       $(this).append('<option>Another option</option>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id=t><option>Option</option></select>

​

Answer 1

请尝试使用mousedown事件：

http://jsfiddle.net/q6qp4xLe/2/

$('#t').on("mousedown", function(){
   $(this).empty();
   for(var i=0;i<5;i++)
       $(this).append('<option>Another option</option>');
});

Answer 2

使用.mousedown作为您的事件而不是.click为我解决了这个问题。或者至少我认为它增加了你请求的功能。