使用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 相关文章推荐
读jQuery之八 包装事件对象
Jun 21 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
js闭包实例汇总
Nov 09 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
vue实现在data里引入相对路径
Jun 05 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
php读取csv实现csv文件下载功能
2013/12/18 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
javascript各种复制代码收集
2008/09/20 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Python中return语句用法实例分析
2015/08/04 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
青春奉献演讲稿
2014/05/08 职场文书
大学生创业计划书
2014/08/14 职场文书
基层党员对照检查材料
2014/08/25 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
实习介绍信模板
2015/01/30 职场文书
台风停课通知
2015/04/24 职场文书
房地产项目合作意向书
2015/05/08 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs