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

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>

100

101

102

103

104

<!DOCTYPE html>

<html>

<head>

<title>模拟实现带有滚动条的下拉菜单</title>

.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>

$(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>

</ul>

</div>

</body>

</html>

以上代码实现我们的需要，点击可以弹出下拉项，并且带有滚动条效果。

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

Hi，您需要填写昵称和邮箱！