使用jquery模拟SELECT下拉框取值效果

admin 2014年09月08日 js和jquery学习 766次阅读 查看评论

jquery模拟SELECT下拉框取值效果


说到模拟SELECT框,大家第一想到的就是使用javascript吧,

其实是jquery也是可以做到的,下面有个不错的示例,

感兴趣的朋友可以参考下jquery模拟SELECT框,

效果图如下:  复制代码 代码如下:

<!DOCTYPE html>
 <html>
 <head>
 <title>jquery模拟SELECT框</title>
 <meta charset="utf-8">
 <style>
 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; 
background:#e8f5fe url(arrow.gif) no-repeat rightright 4px; 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 type="text/javascript" src="http://jt.875.cn/js/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 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> 
<li><a href="#" rel="6">中山</a></li>
<li><a href="#" rel="7">惠州</a></li> 
</ul> </div>
 <div id="result"></div> 
</body>
 </html>


« 上一篇 下一篇 » admin原创文章,转载请注明出处! 标签:jquery下拉框jquery

相关日志:

«   2019年7月   »
1234567
891011121314
15161718192021
22232425262728
293031
控制面板
您好,欢迎到访网站!
  [查看权限]
网站分类
文章归档
网站收藏
友情链接
图标汇集