模拟带有滚动条的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下拉菜单就介绍到这了。

回复

我来回复
  • 暂无回复内容