HTML 选择快捷键覆盖

Question

我有一个下拉列表（HTML 选择元素），它只包含一堆美元金额。例如

50,000 美元

100,000 美元

150,000 美元

200,000 美元

等等..

其中一个选项元素的示例是：

<option value="150000">$150,000</option>

我希望用户能够开始输入 1..5..0.. 并让它自动跳转到 150,000 美元的项目 - 如果我没有任何浏览器，这在大多数浏览器中都可以正常工作我的innerhtml中的$符号。但是因为我所有的 innerhtml 描述都以 $ 符号为前缀，所以键盘快捷键都是相同的，所以实际上没用。

我假设在原始 HTML 中没有简单的方法来指定键盘快捷键应该从相应的 value 属性而不是 innerhtml 文本中获取？

那么实现这一目标的最干净的 jquery sn-p 是什么？

Answer 1

如果可能的话，我会简单地将$ 放在下拉菜单的前面。那将是最不痛苦的方式。

如果这不是一个选项，您可以考虑为每个option 使用包含$ 符号的background-image：

select.dollar option { background-image: url(...); 
                       background-position: left center; 
                       background-repeat: no-repeat;
                       padding-left: 20px;
                      }

不过，浏览器对此的支持非常非常不稳定 - 它可能仅适用于每个系列的最新版本。它可能在 IE 中根本不起作用，我没有方便的概述。而且，这种方式不利于未来的国际化。

除此之外，我认为您将不得不求助于基于 JavaScript 的自定义下拉菜单。