0

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

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

4

3 回答 3

2

如果您的选项少于 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>

无需其他编码

于 2011-01-01T15:53:19.110 回答
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;
    }
}
于 2011-01-01T16:29:01.483 回答
1

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

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

于 2011-01-01T16:33:35.447 回答