javascript - 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()/.click() 事件，但不是我想要的...

关于如何使用 mouseup() 获取选择元素的值有什么想法吗？

ps:我知道 focusout() 事件会产生类似的结果(as explained here)，但我想了解是否有关于 select 元素和 mouseup() 事件。

谢谢

Answer 1

我个人会使用 .change event

.mouseup() 事件在 Chrome 和 Firefox 之间的行为略有不同。此外，如果以编程方式更改值，.mouseup() 事件将不会捕获值的更改，但是 .change() 事件会。

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

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

});

FIDDLE