jQuery模拟select下拉菜单代码下载

select下拉菜单是一种非常方便的控件，美中不足的是，就是外观的可塑性太差，所以有时候需要模拟实现此效果，下面就通过代码实例简单介绍一下如何实现此效果，代码实例如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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>

代码描述：jQuery模拟select下拉菜单。jQuery模拟select下拉菜单代码下载

下载全部收藏

127 169

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册