Question

基本上我有这个选择列表，里面有多个选项：

<select name="drop1" id="Select1" size="30">
  <?php
    for($i = 0;$i<30;$i++)
    {
       echo "<option id=\"other\" value=\"" . $i . "\"></option>\n";
    }
  ?>
</select>

我还有一个输入字段：

<input type="text" id="inputfield"></input>

使用jquery我想完成以下操作：每当输入场被聚焦并按下向上箭头时，我想在选择列表中向上移动1个选项。箭头向下也一样。我已经发现了什么jquery事件用来知道何时按下按键和按下：

$('#inputfield').keydown(function(e){ //When a key is pressed..
    var code = (e.keyCode ? e.keyCode : e.which);
    if ((e.keyCode || e.which) == 40) // on key down
    {
       // Make selection go down here       
    }           
    if((e.keyCode || e.which) == 38) // on key up
    {
    // Make selection go up here
    }
});

Answer 1

我建议如下：

$('#inputfield').keydown(function(e) { //When a key is pressed..
    var code = (e.keyCode ? e.keyCode : e.which),
        select = document.getElementById('Select1');
    if (code == 38) // on pressing: ↑
    {
        select.selectedIndex = select.selectedIndex + 1;
    }
    else if (code == 40) // on pressing ↓
    {
        select.selectedIndex = select.selectedIndex - 1;
    }
});

JS Fiddle demo

更新以回应OP留下的评论（下文）：

当我使用按键向上和按键方法时，选择列表的.change()事件没有响应。

要触发change事件，只需使用trigger();另外，在下面的代码中，我添加了健全性检查以尝试确保仅在change选项的select选项时才会发生加密/关键操作，因此只触发option事件选定的$('#inputfield').keydown(function(e) { //When a key is pressed.. var code = (e.keyCode ? e.keyCode : e.which), select = document.getElementById('Select1'), current = select.selectedIndex, last = $(select).find('option:last').index(); if (code == 38 && current < last) // on key down { select.selectedIndex = current + 1; $(select).trigger('change'); } else if (code == 40 && current > 0) // on key up { select.selectedIndex = current - 1; $(select).trigger('change'); } }); 可以实际更改：

{{1}}

JS Fiddle demo

Answer 2

$('#inputfield').on('keydown',function(e) {
    if (e.keyCode === 40) // on key down
    {
       $('select#Select1').find("option:selected").next().attr("selected", true);
    } else if(e.keyCode === 38) // on key up
    {
       $('select#Select1').find("option:selected").prev().attr("selected", true);
    }
});

手动在jquery中选择一个选项

2 个答案: