jQuery模拟带有滚动条的select下拉菜单代码实例
select下拉菜单十分常用，但是自带的控件非常粗糙，难以满足实际需要，如果下拉选项太多的话，也会影响使用体验，本章节就分享一个模拟实现的select下拉菜单，同时下拉选项带有滚动条效果。
代码实例如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>模拟实现带有滚动条的下拉菜单</title> <style type="text/css"> .select_box { width:150px; position:relative; margin:10px; padding:0; font-size:12px; } .submit_box { width:180px; position:relative; margin:10px; padding:0; font-size:12px; text-align:center; } ul, li { list-style-type:none; padding:0; margin:0 } .select_box input { cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden; border:1px solid #ccc; padding-right:20px; padding-left:10px; } .select_box ul { width:180px; position:absolute; left:0; top:25px; border:1px solid #ccc; background:#fff; overflow: hidden; display:none; background:#ebebeb; z-index:99999; } .select_box ul li { display:block; height:30px; overflow:hidden; line-height:30px; padding-left:5px; width:100%; cursor:pointer; } .hover{background:#ccc;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".select_box input").click(function(){ var thisinput=$(this); var thisul=$(this).parent().find("ul"); if(thisul.css("display")=="none"){ //显示出来滚动条 if(thisul.height()>200){ thisul.css({height:"200"+"px","overflow-y":"scroll" }) }; thisul.fadeIn("100"); thisul.hover(function(){},function(){thisul.fadeOut("100");}); //连续多个事件 thisul.find("li").click(function(){ thisinput.val($(this).text()); thisul.fadeOut("100"); }).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}); } else{ thisul.fadeOut("fast"); } }) }); </script> </head> <body> <div class="select_box"> <input id="myselect" type="text" value="--请选择--" readonly="readonly"> <ul class="select_ul"> <li>搞代码一</li> <li>搞代码二</li> <li>搞代码三</li> <li>搞代码四</li> <li>搞代码五</li> <li>搞代码六</li> <li>搞代码七</li> <li>搞代码八</li> <li>搞代码九</li> </ul> </div> </body> </html> |
以上代码实现我们的需要，点击可以弹出下拉项，并且带有滚动条效果。
原创文章，转载请注明： 转载自搞代码
本文链接地址: jQuery模拟带有滚动条的select下拉菜单代码实例
微信 赏一包辣条吧~
支付宝 赏一听可乐吧~
发表评论