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

Question

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

我正在使用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'));         
    });