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

Dropdown value changes on hover in Firefox

本文关键字：变化 悬停 Firefox      更新时间：2023-09-26

在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 生成的）

你应该得到的不是下拉列表本身的值，而是你悬停的选项的值：

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

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

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

相关文章：