如何确定选择下拉菜单中鼠标下方的选项？答案

【问题标题】：How do I determine what option is underneath the mouse in a select dropdown menu?如何确定选择下拉菜单中鼠标下方的选项？
【发布时间】：2012-04-02 19:41:58
【问题描述】：

我在使用 jQuery 的下拉菜单中实现以下行为时遇到问题。我希望这样当用户将鼠标悬停在其中一个选项上时，会突出显示一个 div。快速的谷歌搜索向我展示了一种“非 jquery”的方式，我在这里创建了一个小提琴：

http://jsfiddle.net/RY5r4/

<html>
<head> 
<script type="text/javascript">

function showSelectValue(e) {
if (e.target.id!= 'select') {
document.getElementById('test').innerHTML = e.target.value;
}
}

function attachTest() {
document.getElementById('select').addEventListener('mouseover',showSelectValue,false);
}

</script>

</head>

<body onload="attachTest()">

<div id="test">Something Here</div>

<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>

</body>
</html>

这个效果大致展示了想要的效果。文本会根据用户选择的选项进行更改（无需单击即可选择）。我目前已经为我的选择实现了一个onMouseOver 处理程序，但是我在确定突出显示的选项时遇到了问题。我该如何做到这一点？

【问题讨论】：

我不确定你想要什么，但使用e.target.text 来获取选项的文本。 jsfiddle.net/skram/RY5r4/2 或 jsfiddle.net/skram/RY5r4/5 用于文本和值。
如果它对任何人有用，脚本移到了 jsFiddle 的 ... 脚本部分：jsfiddle.net/RY5r4/4

标签： jquery html

【解决方案1】：

翻译成jQuery：

$('#select').mouseover(function(e) {
  if (e.target.id != 'select') {
    $('#test').text(e.target.value);
  }
});

http://jsfiddle.net/Guffa/RY5r4/7/

这当然只适用于select 元素实际上显示为下拉列表的浏览器。此外，Internet Explorer 也不支持此功能。

【讨论】：

似乎仅适用于 Firefox，但迄今为止是最好的答案。我真的不关心 IE，但它似乎不适用于 chrome。有什么建议吗？
@duffmandrinkduff：不是真的，如果它不受支持，那么它是否可能完全值得怀疑。似乎只有少数浏览器将选项视为元素，这并不奇怪，因为标准中没有规定选项标签应该变成实际的 DOM 元素。

【解决方案2】：

我很确定没有办法做到这一点；或者至少没有办法做到这一点，甚至可以远程跨浏览器兼容。正如Mouseover option of select for IE 中提到的，你可以试试jQuery UI Selectmenu：

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

【讨论】：