0

基本的に、複数のオプションを含むこの選択リストがあります。

<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
    }
});
4

2 に答える 2

0

次のことをお勧めします。

$('#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 フィドルのデモ。

OPが残したコメントに応じて更新されました（以下）：

キーアップとキーダウンの方法を使用すると、選択リストの.change()イベントが応答しません。

changeイベントをトリガーするには、単純にtrigger();を使用します。また、次のコードでは、キーアップ/キーダウンのみが発生し、オプションの選択が実際に変更される可能性がchangeある場合にのみイベントをトリガーするように、サニティ チェックを追加しました。selectoption 

$('#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');
    }
});​

JS フィドルのデモ。

于 2012-07-20T18:47:12.613 に答える
0 
$('#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);
    }
});
于 2012-07-20T18:51:22.710 に答える