使用数值从带有 JavaScript 的下拉框中选择项目答案

【问题标题】：Using numeric values to select item from a dropdown box with JavaScript使用数值从带有 JavaScript 的下拉框中选择项目
【发布时间】：2011-06-02 06:05:40
【问题描述】：

我的网页中有许多下拉框。这些下拉框之一用于选项列表中的单个选定值。

<SELECT id="Box0" name="">

<OPTION value="1920">my weird description</OPTION>

<OPTION value="1225">other weird description</OPTION>

<OPTION value="3112">some name dynamically fetched</OPTION>
</SELECT>

如何向此部分添加事件，以便当它处于焦点时，我可以使用 1,2.. 等数字键来选择一个选项，而不是使用鼠标或箭头键来选择一个选项？澄清一下：如果我在键盘上按 1，所选值将成为该列表中的第一个值，而 2 所选值将成为该列表中的第二个值。

我选择不使用 JQuery/Mootools 等库/框架。

【问题讨论】：

为什么不将选项重命名为“0,1,2”而不是“无，第一，第二”？然后你甚至不需要一个事件来工作，因为 Firefox 和大多数其他流行的浏览器会在你按下 1 时选择 1。你甚至可以使用“1st, 2nd”，当你按下 1 时 Firefox 会选择“1st”。
+1 表示我之前说过的话；）
来自数据库并且没有“标准化”值并且可以是非常动态的（值可以是 15 或 1501），我会根据用户角色/偏好来限制此列表.
我编辑了问题以澄清我想将数值添加到选项数量中，而不是值 - 因为值是动态的。

标签： javascript dom-events onkeydown

【解决方案1】：

如果您的选项少于 10 个，只需在文本中添加数字即可：

<option value="0">0 none</option>
<option value="1">1 first</option>
<option value="2">2 second</option>

或许更容易阅读：

<option value="0">0 none</option>
<option value="1">1st</option>
<option value="2">2nd</option>

无需其他编码

【讨论】：

+1 我在问题中添加了我的评论，基本上在你回答之前就说了同样的话，哈哈。我刚才也对其进行了编辑，以包含“1st”而不是“1”。伟大的思想确实是一样的。
其实看时间，我先说的;)
这看起来真的很优雅，而且没有任何事件！我将看看我是否可以重构我现有的框架来使用它。
认真的吗？您确定某些框架中没有发生一些使第二个焦点成为必要的事情吗？此外，如果您有多个以相同数字开头的号码，则第二次点击该号码将带您到那里
不，当我使用它时，我似乎得到了相当多的重构。浏览器的怪癖似乎可以控制 - 当浏览器这样做时我讨厌它！

【解决方案2】：

您可以在每个选项上放置一个“rel”属性，这是选择该选项所需的键。因此，对于您的示例，它可能是：

<select id="Box0" name="">  
<option value="0" rel="0">None</option>  
<option value="1" rel="1">First</option>  
<option value="2" rel="2">Second</option>  
<option value="3" rel="x">Millionth</option>
</select>

你不会在寻找 onfocus() 事件，你会在选择框上寻找 onkeydown() （或类似的）事件，看起来像这样：

var MySelect = document.getElementById('Box0');
var MyOptions = MySelect.getElementsByTagName('option');
var KeyPressed = //detect which key has been pressed. I can't remember the
                 //specific code for this off the top of my head
for (i=0; i<MyOptions.length; ++i) {
    if (MyOptions[i].rel == KeyPressed) {
        MyOptions[i].selected = true;
    } else {
        MyOptions[i].selected = false;
    }
}

【讨论】：

不错的一个；我的 HTML 是如何从 XSLT 生成的。添加 rel-tags 会增加我宁愿远离的领域的复杂性。 +1，我喜欢这个解决方案。

【解决方案3】：

我认为这可以解决您的问题

<html>
<head>
<script type="text/javascript">
    function selectvalue(e){
        e = e || event;

        var key = e.which || e.keyCode;

        if(!e.shiftKey && key >= 48 && key <= 57){
            var option = this.options[key - 48];
            if(option){
                option.selected = "selected";
            }
        }
    }
</script>
</head>
<body>

    <SELECT id="Box0" name="" onkeypress="selectvalue.apply(this, arguments)">
        <OPTION value="1920">my weird description</OPTION>
        <OPTION value="1225">other weird description</OPTION>
        <OPTION value="3112">some name dynamically fetched</OPTION>
    </SELECT>

</body>
</html>

javascript 看起来有点乱，因为它必须处理 IE 和所有其他浏览器。

IE 不会将事件对象传递给处理函数，而是我们必须使用全局事件对象。

keycode 也存储在keyCode 中，而不是 IE 中的which。

【讨论】：

哦..完美！这正是我想要的！