• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery模拟带有滚动条的select下拉菜单代码实例

jquery 程序员 6年前 (2019-04-02) 495次浏览 已收录 0个评论

select下拉菜单十分常用,但是自带的控件非常粗糙,难以满足实际需要,如果下拉选项太多的话,也会影响使用体验,本章节就分享一个模拟实现的select下拉菜单,同时下拉选项带有滚动条效果。

代码实例如下:

<!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下拉菜单代码实例


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery模拟带有滚动条的select下拉菜单代码实例
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址