使用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 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JS常见算法详解
Feb 28 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
用js编写留言板
Mar 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模板技术原理【一】
2008/01/10 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
详解vue.js的devtools安装
2017/05/26 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python if语句知识点用法总结
2018/06/10 Python
通过实例了解python property属性
2019/11/01 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
学雷锋树新风演讲稿
2014/05/10 职场文书
放弃继承权公证书
2015/01/23 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS