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

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'));         
    });