使用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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
js的写法基础分析
Jan 17 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
js回到页面指定位置的三种方式
Dec 17 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 email邮箱正则
2008/10/08 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
Open and Print a Word Document
2007/06/15 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery.each使用详解
2015/07/07 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
python_mask_array的用法
2020/02/18 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
.net面试题
2015/12/22 面试题
中专毕业自我鉴定
2013/10/16 职场文书
检举信的格式及范文
2014/04/04 职场文书
我的老师教学反思
2014/05/01 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
建国大业电影观后感
2015/06/01 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle