jquery用div模拟一个下拉列表框
今天分享一个用我自己用jquery写的，用div模拟下拉列表select，这个效果网上有很多，但是写一个有自己思路的代码效果，更有成就感，先看截图：
自我感觉还有焦点获取效果没模拟出来，现在实在没想到好的办法，如果您有好的方法和思路，欢迎并谢谢你能告诉我。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>模拟下拉菜单</title>
6 <style>
7 * { margin: 0; padding: 0; }
8 body { font: 14px '微软雅黑'; color: #555; padding:50px; }
9 ul { list-style: none; }
10 p { margin-bottom: 20px; }
11 .model-select-box { width: 197px; height: 27px; line-height: 27px; border: 1px solid #aaa; float: left; margin-right: 20px; text-indent: 5px; position: relative; }
12 .model-select-text { height: 27px; padding-right: 27px; background: url(http://t43-2.yunpan.360.cn/p/800-600.e692334dad266bef653533e12fa291286932eb10.3619c0.jpg?t=64368e238226776012c7ea2a6ad4dcce&d=20140221) no-repeat right 0; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
13 .model-select-option { display: none; position: absolute; background: #fff; width: 100%; left: -1px; border: 1px solid #aaa; }
14 .model-select-option li { height: 22px; line-height: 22px; color: #555; cursor: pointer; }
15 .model-select-option li.seleced { background: #06C; color: #fff; }
16 </style>
17 </head>
18
19 <body>
20 <p>模拟下拉菜单</p>
21 <div class="model-select-box">
22 <div class="model-select-text" data-value="">广州-08</div>
23 <ul class="model-select-option">
24 <li data-option="1">上海-01</li>
25 <li data-option="2">北京-02</li>
26 <li data-option="3">沈阳-03</li>
27 <li data-option="4">天津-04</li>
28 <li data-option="5">武汉-05</li>
29 <li data-option="6">成都-06</li>
30 <li data-option="7">重庆-07</li>
31 <li data-option="8" class="seleced">广州-08</li>
32 <li data-option="9">拉萨-09</li>
33 <li data-option="10">石家庄-10</li>
34 <li data-option="11">乌鲁木齐-11</li>
35 <li data-option="12">济南-12</li>
36 <li data-option="13">哈尔滨-13</li>
37 <li data-option="14">吉林-14</li>
38 </ul>
39 </div>
40 <div class="model-select-box">
41 <div class="model-select-text" data-value="">北京-02</div>
42 <ul class="model-select-option">
43 <li data-option="1">上海-01</li>
44 <li data-option="2" class="seleced">北京-02</li>
45 <li data-option="3">沈阳-03</li>
46 <li data-option="4">天津-04</li>
47 </ul>
48 </div>
49 <div class="model-select-box">
50 <div class="model-select-text" data-value="">武汉-05</div>
51 <ul class="model-select-option">
52 <li data-option="1">上海-01</li>
53 <li data-option="2">北京-02</li>
54 <li data-option="3">沈阳-03</li>
55 <li data-option="4">天津-04</li>
56 <li data-option="5" class="seleced">武汉-05</li>
57 </ul>
58 </div>
59 <script src="jquery-1.7.1.min.js"></script>
60 <script>
61 $(function(){
62 /*
63 * 模拟网页中所有的下拉列表select
64 */
65 function selectModel(){
66 var $box = $('div.model-select-box');
67 var $option = $('ul.model-select-option', $box);
68 var $txt = $('div.model-select-text', $box);
69 var speed = 10;
70 /*
71 * 单击某个下拉列表时，显示当前下拉列表的下拉列表框
72 * 并隐藏页面中其他下拉列表
73 */
74 $txt.click(function(e) {
75 $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function(){
76 int($(this));
77 });
78 $(this).siblings('ul.model-select-option').slideToggle(speed, function(){
79 int($(this));
80 });
81 return false;
82 });
83 //点击选择，关闭其他下拉
84 /*
85 * 为每个下拉列表框中的选项设置默认选中标识 data-selected
86 * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
87 * 为选项添加 mouseover 事件
88 */
89 $option.find('li').each(function(index, element) {
90 if($(this).hasClass('seleced')){
91 $(this).addClass('data-selected');
92 }
93 })
94 .mousedown(function(){
95 $(this).parent().siblings('div.model-select-text').text($(this).text())
96 .attr('data-value', $(this).attr('data-option'));
97
98 $option.slideUp(speed, function(){
99 int($(this));
100 });
101 $(this).addClass('seleced data-selected').siblings('li').removeClass('seleced data-selected');
102 return false;
103 })
104 .mouseover(function(){
105 $(this).addClass('seleced').siblings('li').removeClass('seleced');
106 });
107 //点击文档，隐藏所有下拉
108 $(document).click(function(e) {
109 $option.slideUp(speed, function(){
110 int($(this));
111 });
112 });
113 //初始化默认选择
114 function int(obj){
115 obj.find('li.data-selected').addClass('seleced').siblings('li').removeClass('seleced');
116 }
117 }
118
119 selectModel();
120 })
121 </script>
122 </body>
123 </html>
jquery用div模拟一个下拉列表框的更多相关文章
- jquery之div模拟textarea文本域轻松实现高度自适应
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- jquery双向列表选择器DIV模拟版
前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...
- 使用 jQuery Mockjax 插件模拟 Ajax 请求
在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...
- jQuery中的模拟操作
jQuery中的模拟操作主要是通过trigger来触发,相当于页面加载完成后不需要用户点击按钮,就可以自动触发页面中的相关事件. trigger(type,[data])可以用来模拟触发自定义事件的触 ...
- 解密jQuery事件核心 - 模拟事件（四）
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- jQuery插件：模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
随机推荐
- SQL Server 基础 05 多链表查询和子查询
连接查询 值得注意的是:字段前必须加表名,以便混淆 -- 多表连接查询和子查询 select * from dbo.stu_info ,dbo.sname2 -- 加连接规则的查询 where se ...
- fastxml Jackson JsonNode (ObjectNode) 转 List
做环聊开发, Java 后台示例 用的 fastxml Jackson 解析json(擦, 狗屎, 不能支持下国产吗?) 有的json字段是数组, 发现不会解析了, 谷歌了下, 用以下方法可行,(不知 ...
- python读取EXCLE文件数据
python读取EXCEL,利用 Google 搜索 Python Excel,点击第一条结果http://www.python-excel.org/ ,能够跨平台处理 Excel. 按照文档一步步去 ...
- DDL\DML\DCL\DQL
[DML] DML = Data Manipulation Language,数据操纵语言,命令使用户能够查询数据库以及操作已有数据库中的数据的计算机语言.具体是指是UPDATE更新.INSERT插入 ...
- java --- 对象的创建过程
java 对象创建的过程 存在了继承关系之后,对象创建过程如下: 1.分配空间.要注意的是,分配空间不光是分配子类的空间,子类对象中包含的父类对象所需要的空间,一样在这一步统一分配.在分配的空间的时候 ...
- 浙江工商大学15年校赛E题 无邪的飞行棋 【经典背包】
无邪的飞行棋 Time Limit 1s Memory Limit 64KB Judge Program Standard Ratio(Solve/Submit) 15.38%(4/26) Descr ...
- Week11（11月21日）
Part I:提问 =========================== 1.如何编辑更新一条记录? Part II:案例学习 =========================== MusicSt ...
- 转：CSS圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
- JSpider是一个用Java实现的WebSpider
JSpider是一个用Java实现的WebSpider,JSpider的执行格式如下: jspider [URL] [ConfigName] URL一定要加上协议名称,如:http://,否则会报错. ...
- VC中关于 0xcccccccc和 0xcdcdcdcd异常
VC在调试时,可能会报“写入位置0xcccccccc 时发生访问冲突”,或者“写入位置0xcdcdcdcd 时发生访问冲突”,这些问题可能是由于使用了未初始化的指针引起的. 在 Debug 模式下,V ...