jquery模拟SELECT下拉框取值效果


Posted in Javascript onOctober 23, 2013

jquery模拟SELECT框,效果图如下:
jquery模拟SELECT下拉框取值效果 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>jquery模拟SELECT框</title> 
<meta charset="utf-8"> 
<style> 
body{padding:0;margin:0;font-size:12px;} 
ul,li{list-style:none;padding:0;margin:0;} 
#dropdown{width:186px; margin:100px auto; position:relative} 
.input_select{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; } 
#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} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".input_select").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(); 
$(".input_select").val(txt); 
var value = $(this).attr("rel"); 
$("#dropdown ul").hide(); 
$("#result").html("您选择了"+txt+",值为:"+value); 
}); }); 
</script> 
</head> 
<body> 
<div id="dropdown"> 
<input class="input_select" type="text" value="请选择城市"/> 
<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> 
</body> 
</html>
Javascript 相关文章推荐
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 #Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 #Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 #Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 #Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 #Javascript
JS Date函数整理方便使用
Oct 23 #Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 #Javascript
You might like
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
PHP 图片处理
2020/09/16 PHP
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
vue axios用法教程详解
2017/07/23 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
pip命令无法使用的解决方法
2018/06/12 Python
了解一下python内建模块collections
2020/09/07 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
《雾凇》教学反思
2014/02/17 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS