汇盛国际娱乐:使用CSS和jQuery模拟select并附提交后

时间: 作者:约且

  

[CSS,jQuery,模拟select]使用CSS和jQuery模拟select并附提交后取得数据的代码

  模拟select 并带有提交后取得数据的代码  
  
HTML Code  
代码如下:
  
汇盛国际注册  
  
  
JavaScript Code  
代码如下:
  
  
$(function(){  
$("#dropdown p").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();  
$("#dropdown p").html(txt);  
var value = $(this).attr("rel");  
$("#dropdown ul").hide();  
$("#result").html("您选择了"+txt+",值为:"+value);  
});  
  
});  
  
  
CSS Code  
代码如下:
  
#dropdown{width:186px; margin:100px auto; position:relative}  
#dropdown p{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; cursor:pointer}  
#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}  

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台