如何在HTML选择元素内关注焦点（从选项到选项）

Question

我试图向用户显示额外的信息，因为它们突出显示了打开的select元素中的不同选项。

我使用select元素的keydown事件，并使用键盘（箭头键）时使其工作。基本上我跟踪用户从选定项目走多远和朝哪个方向。有了这些信息，我知道哪个选项被突出显示。

我的问题是：如果用户只是使用鼠标，我怎么知道哪个选项被突出显示？

Answer 1

这仅适用于FF：http://jsfiddle.net/umDNF/2/（下面的代码也是如此）。您可能想要考虑使用自定义下拉菜单，而不是使用框。也许像这样http://labs.abeautifulsite.net/jquery-selectBox/这里有大量的钩子来触发你的信息显示。

HTML：

<select> 
    <option data-info="Option one">1</option> 
    <option data-info="Option two">2</option> 
    <option data-info="Option three">3</option> 
    <option data-info="Option four">4</option> 
</select> 

<div class="metadata">Placeholder</div> 

Javscript（使用jquery）：

$('option').live('mouseenter', function(){ 
     $('.metadata').html($(this).attr('data-info'));   
    });