使用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字符串函数扩展代码
Sep 13 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
angular2中Http请求原理与用法详解
Jan 11 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
简单实用的全选反选按钮例子
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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
python中的字典使用分享
2016/07/31 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python如何telnet到网络设备
2021/02/18 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
会计专业毕业生自我鉴定
2013/10/29 职场文书
公司任命书模板
2014/06/06 职场文书
入党现实表现材料
2014/12/23 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2016七夕情人节感言
2015/12/09 职场文书