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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
javascript事件冒泡实例分析
May 13 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
vue实现下拉菜单树
Oct 22 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php分页函数
2006/07/08 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
求职自荐书范文
2013/12/04 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
项目开发计划书
2014/01/09 职场文书
商场促销活动方案
2014/02/08 职场文书
国培教师自我鉴定
2014/02/12 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2015年中个人总结范文
2015/03/10 职场文书
工作表现证明
2015/06/15 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android