HTML 选择快捷键覆盖

Question

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

$50,000

$100,000

$150,000

$200,000

等等。

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

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

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

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

那么实现这一点的最干净的 jquery 片段是什么？

Answer 1

如果可能的话，我只需将 $ 放在下拉菜单前面。这将是最不痛苦的方法。

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

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

浏览器对此的支持非常多，但是非常脆弱 - 它可能只能在每个系列的最新版本中工作。它可能根本不适用于 IE，我没有方便的概述。而且，这种方式也不利于今后的国际化。

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