模拟带有滚动条的select下拉菜单
分类:实例代码
模拟带有滚动条的select下拉菜单属于前端实例代码,有关更多实例代码大家可以查看。
select下拉菜单十分常用,但是自带的控件非常粗糙,难以满足实际需要,如果下拉选项太多的话,也会影响使用体验,本章节就分享一个模拟实现的select下拉菜单,同时下拉选项带有滚动条效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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>
以上代码实现我们的需要,点击可以弹出下拉项,并且带有滚动条效果。
模拟带有滚动条的select下拉菜单,这样的场景在实际项目中还是用的比较多的,关于模拟带有滚动条的select下拉菜单就介绍到这了。