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"));
});

或者如果您需要获取下拉列表本身的值 - 然后将其绑定到下拉列表本身，而不是选项。

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

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

1 个答案: