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中。

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

3 个答案: