jQuery模拟select下拉框代码下载

大家都知道自带的select下拉框并不美观，并且很难使用CSS进行美化，但是下拉框这种效果往往又是必须要使用的，所以为了美观，我们可以模拟实现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>
<style type="text/css">
body,ul,li{ 
  margin:0; 
  padding:0; 
  font-size:13px;
}
ul,li{
  list-style:none;
}
#divselect{
  width:186px;
  margin:80px auto;
  position:relative; 
  z-index:10000;
}
#divselect cite{
  width:150px; 
  height:24px;
  line-height:24px; 
  display:block; 
  color:#807a62; 
  cursor:pointer;
  font-style:normal;
  padding-left:4px; 
  padding-right:30px; 
  border:1px solid #333333; 
  background:url(mytest/jQuery/jiantou.png) no-repeat right center;
}
#divselect ul{
  width:184px;
  border:1px solid #333333; 
  background-color:#ffffff; 
  position:absolute; 
  z-index:20000; 
  margin-top:-1px; 
  display:none;
}
#divselect ul li{
  height:24px; 
  line-height:24px;
}
#divselect ul li a{
  display:block; 
  height:24px; 
  color:#333333; 
  text-decoration:none; 
  padding-left:10px; 
  padding-right:10px;
}
#divselect ul li a:hover{
  background-color:#CCC;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.divselect=function(divselectid,inputselectid){
   var inputselect=$(inputselectid);
   $(divselectid+" cite").click(function(e){
     var ul=$(divselectid+" ul");
  
     if(ul.css("display")=="none"){
       ul.slideDown("fast");
     }
     else{
       ul.slideUp("fast");
     }
     e.stopPropagation();
   });
          
   $(divselectid+" ul li a").click(function(){
     var txt = $(this).text();
     $(divselectid+" cite").text(txt);
     var value = $(this).attr("selectid");
     inputselect.val(value);
     $(divselectid+" ul").hide();
     e.stopPropagation();  
   });
          
   $(document).click(function(){
      $(divselectid+" ul").hide();
   });
  };
  
  $.divselect("#divselect","#inputselect");
})
</script>
</head>
<body>
<form action="#" method="post">
  <div id="divselect">
   <cite>请选择特效分类</cite>
   <ul>
    <li><a href="javascript:;" selectid="1">导航菜单</a></li>
    <li><a href="javascript:;" selectid="2">焦点幻灯片</a></li>
    <li><a href="javascript:;" selectid="3">广告代码</a></li>
    <li><a href="javascript:;" selectid="4">网页特效</a></li>
    <li><a href="javascript:;" selectid="5">jquery特效</a></li>
   </ul>
  </div>
  <input name="" type="hidden" value="" id="inputselect"/>
</form>
</body>
</html>

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

下载全部收藏

111 148

用户评论

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