如何在 HTML 选择元素中跟踪焦点(从一个选项到另一个选项）

How to follow focus (from option to option) within an HTML select element

本文关键字：选项 一个 另一个 焦点 HTML 选择 元素 跟踪      更新时间：2023-09-26

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

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

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

这

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

目录：

<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'));         
    });
相关文章：