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

我在使用jQuery在下拉菜单中实现以下行为时遇到问题。我喜欢它，所以当用户鼠标悬停其中一个选项时，div会突出显示。快速谷歌搜索给我这样的“非jQuery的”的方式，我已经创建了一个捣鼓这里：如何在选择下拉菜单中确定鼠标下方的选项？

<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处理程序，但我在确定突出显示哪个选项时遇到问题。我如何做到这一点？

来源

2012-04-02 duffmandrinkduff

我不确定你想要什么，但使用'e.target.text'来获得选项的文本。 http://jsfiddle.net/skram/RY5r4/2/或http://jsfiddle.net/skram/RY5r4/5/用于文本和值。 – 2012-04-02 19:46:59

如果它对任何人有任何用处，脚本移动到jsFiddle的脚本部分：http://jsfiddle.net/RY5r4/4/ – 2012-04-02 19:47:56

转换为jQuery的：

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

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

此，如果课程只在浏览器上运行，其中一个select元素实际上是显示为下拉列表。另外，Internet Explorer不支持这一点。

来源

2012-04-02 20:26:47 Guffa

似乎只能在Firefox上工作，但一直是迄今为止最好的答案。我并不在乎IE，但它似乎并不适用于Chrome。有什么建议么？ – duffmandrinkduff 2012-04-02 20:40:23

@duffmandrinkduff：不是真的，如果它不被支持，它是可能的，这是值得怀疑的。似乎只有少数浏览器将这些选项视为元素，这并不令人感到意外，因为标准中没有任何内容表示选项标签应该变成实际的DOM元素。 – Guffa 2012-04-02 21:11:18

我很确定没有办法做到这一点;或者至少没有办法做到甚至是远程跨浏览器兼容。正如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/

来源

2012-04-02 20:09:00

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

回答

相关问题