0

Web ページ内に多数のドロップダウン ボックスがあります。これらのドロップダウン ボックスの 1 つは、オプションのリストから選択された 1 つの値に使用されます。

<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、選択した値がそのリストの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 はイベント オブジェクトをハンドラー関数に渡さず、代わりにグローバル イベント オブジェクトを使用する必要があります。

キーコードもIEkeyCodeの代わりに同じ方法で保存されます。which

于 2011-01-01T16:33:35.447 に答える