使用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 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python爬取哈尔滨天气信息
2018/07/14 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
幼儿评语大全
2014/04/30 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
获奖感言范文
2015/07/31 职场文书