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

【问题标题】：How to follow focus (from option to option) within an HTML select element如何在 HTML 选择元素中关注焦点（从选项到选项）
【发布时间】：2012-06-10 20:44:29
【问题描述】：

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

我正在使用 select 元素的 keydown 事件，并在使用键盘（箭头键）时让它工作。基本上，我会跟踪用户从所选项目出发的距离和方向。有了这些信息，我就知道突出显示了哪个选项。

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

【问题讨论】：

标签： javascript html

【解决方案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'));         
    });

【讨论】：