模擬帶有滾動條的select下拉選單

admin發表於2017-11-22

select下拉選單十分常用，但是自帶的控制元件非常粗糙，難以滿足實際需要，如果下拉選項太多的話，也會影響使用體驗，本章節就分享一個模擬實現的select下拉選單，同時下拉選項帶有滾動條效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.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>

以上程式碼實現我們的需要，點選可以彈出下拉項，並且帶有滾動條效果。

相關文章