<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉列表</title> <style type="text/css"> .now{ color:red;} .ullishes{ 100px; overflow:hidden;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ $('div.aa').data('key',0); $('ul.ullishes li').hover(function(){ $('ul.ullishes li').removeClass('now'); var index=$(this).index(); $(this).addClass('now'); $('div.aa').data('key',index); console.log($('div.aa').data('key')); },function(){ $(this).removeClass('now'); }); $('.inp_match').keydown(function(event){ $('ul.ullishes li').removeClass('now'); var keycode = event.which; if(keycode == 38){ var i = $('div.aa').data('key'); if(i<0){ i=3; }else{ i--; } $('ul.ullishes').find('li').eq(i).addClass('now'); $('div.aa').data('key',i); } if(keycode == 40){ var i = $('div.aa').data('key'); if(i>3){ i=0; }else{ i++; } $('ul.ullishes').find('li').eq(i).addClass('now'); $('div.aa').data('key',i); } }) }) </script> </head> <body> <div class="aa"><input type="text" class="inp_match" /></div> <ul class="ullishes"> <li></li> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> </body> </html>