HTML选择上的MouseUp（）事件不起作用

Question

所以我有一个国家列表，显示为带有select元素的下拉列表，

这是我的HTML：

<select id="myList">
 <option>United States</option>
 <option>France</option>
 <option>Great Britain</option>
 <option>China</option>
 <option>Russia</option>
</select>

<span id="selectedCountry"> </span>

我想要的是能够将#selectedCountry的值设置为用户实际选择的选项。

我试图设置一个.mouseUp() jQuery事件，如下所示：

$("#myList").mouseup(function() {

   var val = $(this).val();
   $("#selectedCountry").text(val);

 });

奇怪的是，此代码触发了.mousedown() / .mousedown() .click()事件，但没有触发我打算执行的操作...

关于如何使用mouseup()获得select元素的值的任何想法？

ps：我知道focusout()事件会产生类似的结果（ 如此处所述 ），但我想了解select元素和mouseup()事件是否有特定的mouseup() 。

谢谢

Answer 1

我个人将使用.change事件

Chrome浏览器和Firefox之间的.mouseup()事件行为略有不同。 此外，如果该值编程改变.mouseup()事件不会赶上变化的值，但是.change()事件将。

$("#myList").change(function() {

   var val = $(this).val();
   $("#selectedCountry").text(val);

});

小提琴

Answer 2

MouseUp事件处理Javascript“ Mouseup”事件。 您尝试实现的目标应该由Change事件来完成，因为这实际上将在您更改浏览器中的dropdowns值时触发。