javascript - 在 Firefox 中悬停时下拉值会发生变化

Question

在 Firefox 中，如果我单击下拉列表并将鼠标悬停在列表上，并且在悬停时如果我获取下拉列表的值，即使不单击它也会显示悬停的值。

假设我有:

<select size="1" class="form-control input-sm input-element" name="fiveMod" id="fiveMod">   
<option value="[6FAM]">6-FAM (fluorescein)</option>
<option value="[HEX]">HEX</option>
<option selected="selected" value="[JOE]">JOE </option>
<option value="[TET]">TET </option>

这里选择的值为JOE。如果我运行以下代码，

$('#fiveMod > option').hover(function(){
   console.log($('#fiveMod').val());
});

它正在打印我悬停在列表中的值。在某些情况下，当我调用 ajax 请求并成功时，如果我将鼠标悬停在下拉列表中，即使没有单击它，它也会获取错误的值，这会产生问题。 (HTML是通过JSF生成的)

Answer 1

您应该获得的不是下拉列表本身的值，而是您悬停的选项的值:

$('#fiveMod > option').hover(function(){
   console.log($(this).prop("value"));
});

或者，如果您需要获取下拉列表本身的值 - 则甚至可以绑定(bind)到下拉列表本身，而不是绑定(bind)到选项。

显然<option> elements 在 IE 中也不会触发悬停事件，所以我认为选择的这种方法根本不正确。如果您需要为此的特定行为，我建议使用 CSS+JS 来设置下拉列表的行为，并使用 div 或链接来模拟它，通过它们您可以执行正确的悬停行为。