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

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>

Javascript（使用 jquery）：

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