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


Posted in Javascript onOctober 18, 2013

模拟select 并带有提交后取得数据的代码
使用CSS和jQuery模拟select并附提交后取得数据的代码 
HTML Code

<div id="dropdown"> 
<p>请选择城市</p> 
<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>

JavaScript Code
<script type="text/javascript"> 
$(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); 
}); }); 
</script>

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}
Javascript 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
简单实用的全选反选按钮例子
Oct 18 #Javascript
关于jquery的多个选择器的使用示例
Oct 18 #Javascript
js页面跳转的常用方法整理
Oct 18 #Javascript
js判断上传文件的类型和大小示例代码
Oct 18 #Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 #Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 #Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
Javascript函数的参数
2015/07/16 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
关于vue面试题汇总
2018/03/20 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python模拟三级菜单效果
2017/09/11 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Django中使用Celery的方法示例
2018/11/29 Python
python解包概念及实例
2021/02/17 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
工作自我评价分享
2013/12/01 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python