如图所示点击一个表单出现一弹出层，如何用键盘的上下左右去控制他们 上一个 下一个
我写了一个效果但是我按上下左右，返回的都是第一个，求大神指点一下。此外说明我用的是基于jq 的easyui插件

代码如下，感兴趣的看下面的完整版代码，嫌麻烦的看控制键盘上下左右的精简版代码

/**
 * combo - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ stworthy@gmail.com ] 
 * 
 * Dependencies:
 *   panel
 *   validatebox
 * 
 */
(function($){
    function setSize(target, width){
        var opts = $.data(target, 'combo').options;
        var combo = $.data(target, 'combo').combo;
        var panel = $.data(target, 'combo').panel;
         
        if (width) opts.width = width;
         
        if (isNaN(opts.width)){
            opts.width = combo.find('input.combo-text').outerWidth();
        }
        var arrowWidth = combo.find('.combo-arrow').outerWidth();
        var width = opts.width - arrowWidth;
        combo.find('input.combo-text').width(width);
         
        panel.panel('resize', {
            width: (opts.panelWidth ? opts.panelWidth : combo.outerWidth()),
            height: opts.panelHeight
        });
    }
     
    /**
     * create the combo component.
     */
    function init(target){
        $(target).hide();
         
        var span = $('').insertAfter(target);
        var input = $('').appendTo(span);
        $('').appendTo(span);
        $('').appendTo(span);
        var panel = $('
').appendTo('body');
        panel.panel({
            doSize:false,
            closed:true,
            style:{
                position:'absolute'
            },
            onOpen:function(){
                $(this).panel('resize');
            }
        });
         
        var name = $(target).attr('name');
        if (name){
            span.find('input.combo-value').attr('name', name);
            $(target).removeAttr('name').attr('comboName', name);
        }
        input.attr('autocomplete', 'off');
         
        return {
            combo: span,
            panel: panel
        };
    }
     
    function destroy(target){
        $.data(target, 'combo').panel.panel('destroy');
        $.data(target, 'combo').combo.remove();
        $(target).remove();
    }
     
    function bindEvents(target){
        var opts = $.data(target, 'combo').options;
        var combo = $.data(target, 'combo').combo;
        var panel = $.data(target, 'combo').panel;
        var input = combo.find('.combo-text');
        var arrow = combo.find('.combo-arrow');
         
        $(document).unbind('.combo');
        combo.unbind('.combo');
        panel.unbind('.combo');
        input.unbind('.combo');
        arrow.unbind('.combo');
         
        if (!opts.disabled){
            $(document).bind('mousedown.combo', function(e){
                $('p.combo-panel').panel('close');
            });
            panel.bind('mousedown.combo', function(e){
                return false;
            });
             
            input.bind('focus.combo', function(){
                showPanel(target);
            }).bind('mousedown.combo', function(e){
                e.stopPropagation();
            }).bind('keyup.combo', function(e){
                switch(e.keyCode){
                    case 37:   // left
                    case 38:   // up
                        opts.selectPrev.call(target);
                        break;
                    case 39:   // right
                    case 40:   // down
                        opts.selectNext.call(target);
                        break;
                    case 13:   // enter
                        opts.selectCurr.call(target);
                        break;
                    case 27:   // esc
                        hidePanel(target);
                        break;
                    default:
                        if (opts.editable){
                            opts.filter.call(target, $(this).val());
                        }
                }
                return false;
            });
             
            arrow.bind('click.combo', function(){
                input.focus();
            }).bind('mouseenter.combo', function(){
                $(this).addClass('combo-arrow-hover');
            }).bind('mouseleave.combo', function(){
                $(this).removeClass('combo-arrow-hover');
            });
        }
    }
     
    /**
     * show the drop down panel.
     */
    function showPanel(target){
        var combo = $.data(target, 'combo').combo;
        var panel = $.data(target, 'combo').panel;
         
        if ($.fn.window){
            panel.panel('panel').css('z-index', $.fn.window.defaults.zIndex++);
        }
         
        panel.panel('open');
         
        (function(){
            if (panel.is(':visible')){
                var top = combo.offset().top + combo.outerHeight();
                if (top + panel.outerHeight() > $(window).height() + $(document).scrollTop()){
                    top = combo.offset().top - panel.outerHeight();
                }
                if (top < $(document).scrollTop()){
                    top = combo.offset().top + combo.outerHeight();
                }
                panel.panel('move', {
                    left:combo.offset().left,
                    top:top
                });
                setTimeout(arguments.callee, 200);
            }
        })();
    }
     
    /**
     * hide the drop down panel.
     */
    function hidePanel(target){
        var panel = $.data(target, 'combo').panel;
        panel.panel('close');
    }
     
    function validate(target, doit){
        if ($.fn.validatebox){
            var opts = $.data(target, 'combo').options;
            var input = $.data(target, 'combo').combo.find('input.combo-text');
            input.validatebox(opts);
            if (doit){
                input.validatebox('validate');
                input.trigger('mouseleave');
            }
        }
    }
     
    function setDisabled(target, disabled){
        var opts = $.data(target, 'combo').options;
        var combo = $.data(target, 'combo').combo;
        if (disabled){
            opts.disabled = true;
            $(target).attr('disabled', true);
            combo.find('.combo-value').attr('disabled', true);
            combo.find('.combo-text').attr('disabled', true);
        } else {
            opts.disabled = false;
            $(target).removeAttr('disabled');
            combo.find('.combo-value').removeAttr('disabled');
            combo.find('.combo-text').removeAttr('disabled');
        }
    }
     
    function clear(target){
        var combo = $.data(target, 'combo').combo;
        combo.find('input.combo-value:gt(0)').remove();
        combo.find('input.combo-value').val('');
        combo.find('input.combo-text').val('');
    }
     
    function getText(target){
        var combo = $.data(target, 'combo').combo;
        return combo.find('input.combo-text').val();
    }
     
    function setText(target, text){
        var combo = $.data(target, 'combo').combo;
        combo.find('input.combo-text').val(text);
        validate(target, true);
    }
     
    function getValues(target){
        var values = [];
        var combo = $.data(target, 'combo').combo;
        combo.find('input.combo-value').each(function(){
            values.push($(this).val());
        });
        return values;
    }
     
    function setValues(target, values){
        var opts = $.data(target, 'combo').options;
        var oldValues = getValues(target);
         
        var combo = $.data(target, 'combo').combo;
        combo.find('input.combo-value').remove();
        var name = $(target).attr('comboName');
        for(var i=0; i').appendTo(combo);
            if (name) input.attr('name', name);
            input.val(values[i]);
        }
         
        var tmp = [];
        for(var i=0; i

function bindEvents(target){
        var opts = $.data(target, 'combo').options;
        var combo = $.data(target, 'combo').combo;
        var panel = $.data(target, 'combo').panel;
        var input = combo.find('.combo-text');
        var arrow = combo.find('.combo-arrow');
         
        $(document).unbind('.combo');
        combo.unbind('.combo');
        panel.unbind('.combo');
        input.unbind('.combo');
        arrow.unbind('.combo');
         
        if (!opts.disabled){
            $(document).bind('mousedown.combo', function(e){
                $('p.combo-panel').panel('close');
            });
            panel.bind('mousedown.combo', function(e){
                return false;
            });
             
            input.bind('focus.combo', function(){
                showPanel(target);
            }).bind('mousedown.combo', function(e){
                e.stopPropagation();
            }).bind('keyup.combo', function(e){
                switch(e.keyCode){
                    case 37:   // left
                    case 38:   // up
                        opts.selectPrev.call(target);
                        break;
                    case 39:   // right
                    case 40:   // down
                        opts.selectNext.call(target);
                        break;
                    case 13:   // enter
                        opts.selectCurr.call(target);
                        break;
                    case 27:   // esc
                        hidePanel(target);
                        break;
                    default:
                        if (opts.editable){
                            opts.filter.call(target, $(this).val());
                        }
                }
                return false;
            });
             
            arrow.bind('click.combo', function(){
                input.focus();
            }).bind('mouseenter.combo', function(){
                $(this).addClass('combo-arrow-hover');
            }).bind('mouseleave.combo', function(){
                $(this).removeClass('combo-arrow-hover');
            });
        }
    }