模擬實現select下拉選單例項程式碼

admin發表於2017-02-28
單例

select下拉選單是一種非常方便的控制元件，美中不足的是，就是外觀的可塑性太差，所以有時候需要模擬實現此效果，下面就通過程式碼例項簡單介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<meta charset="utf-8">
<style type="text/css">
body {
  padding:0;
  margin:0;
  font-size:12px;
}
ul, li {
  list-style:none;
  padding:0;
  margin:0;
}
#dropdown {
  width:186px;
  margin:100px auto;
  position:relative
}
.input_select {
  width:150px;
  height:24px;
  line-height:24px;
  padding-left:4px;
  padding-right:30px;
  border:1px solid #a9c9e2;
  color:#807a62;
}
#dropdown ul {
  width:184px;
  background:#e8f5fe;
  margin-top:2px;
  border:1px solid #a9c9e2;
  position:absolute;
  display:none
}
#dropdown ul li {
  height:24px;
  line-height:24px;
  text-indent:10px
}
#dropdown ul li a {
  display:block;
  height:24px;
  color:#807a62;
  text-decoration:none
}
#dropdown ul li a:hover{
  background:#c6dbfc;
  color:#369
}
#result {
  margin-top:10px;
  text-align:center
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $(".input_select").click(function(){ 
    var ul=$("#dropdown ul"); 
    if(ul.css("display")=="none"){ 
      ul.slideDown("fast"); 
    }
    else{ 
      ul.slideUp("fast"); 
    } 
  }); 
  $("#dropdown ul li a").click(function(){ 
    var txt = $(this).text(); 
    $(".input_select").val(txt); 
    var value = $(this).attr("rel"); 
    $("#dropdown ul").hide(); 
    $("#result").html("您選擇了"+txt+"，值為："+value); 
  }); 
}); 
</script>
</head>
<body>
<div id="dropdown">
  <input class="input_select" type="text" value="請選擇城市"/>
  <ul>
    <li><a href="#" rel="2">北京</a></li>
    <li><a href="#" rel="3">上海</a></li>
    <li><a href="#" rel="4">武漢</a></li>
    <li><a href="#" rel="5">廣州</a></li>
  </ul>
</div>
<div id="result"></div>
</body>
</html>

相關文章