Question

我在使用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>

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

Answer 1

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

Answer 2

转换为jQuery：

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

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

此if课程仅适用于select元素实际显示为下拉列表的浏览器。此外，Internet Explorer不支持此功能。

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

2 个答案: