如图所示点击一个表单出现一弹出层，如何用键盘的上下左右去控制他们 上一个 下一个
我写了一个效果但是我按上下左右，返回的都是第一个，求大神指点一下。此外说明我用的是基于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'); }); } }