使用数字值从JavaScript的下拉框中选择项目

Question

编辑

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

<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之类的库/框架。

谢谢，

Answer 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>

无需其他编码

Answer 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;
    }
}

Answer 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 ，而不是which的IE浏览器。

使用数字值从JavaScript的下拉框中选择项目

问题描述

3 个解决方案

解决方案1
2 2011-01-01 15:53:19

解决方案2
2 2011-01-01 16:29:01

解决方案3
1 已采纳 2011-01-01 16:33:35

使用数字值从JavaScript的下拉框中选择项目

问题描述

3 个解决方案

解决方案1 2 2011-01-01 15:53:19

解决方案2 2 2011-01-01 16:29:01

解决方案3 1 已采纳 2011-01-01 16:33:35

解决方案1
2 2011-01-01 15:53:19

解决方案2
2 2011-01-01 16:29:01

解决方案3
1 已采纳 2011-01-01 16:33:35