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" ...
随机推荐
- [转] Ant 编译 Android 项目为 Apk 实战, 常见问题解决
补充,自行安装Ant, 配置ant环境变量, 在android 项目 根目录下使用 android update project 可以自动生成 build.xml 和 local.peoperties ...
- pycharm+QT4的helloworld
# -*- coding: utf-8 -*- from PyQt4 import QtCore, QtGui try: _fromUtf8 = QtCore.QString.fromUtf8 exc ...
- WebApp模版并运行
WebApp模版并运行 ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行 核心框架 ASP.NET Core APP 创建与运行 总结 之前两篇文章简析.NET Core 以及与 ...
- WPF：DataTemplateSelector设置控件不同的样式
原文 WPF:DataTemplateSelector设置控件不同的样式 最近想实现这么个东西,一个ListBox, 里面的ListBoxItem可能是文本框.下拉框.日期选择控件等等. 很自然的想到 ...
- HTTP 301 跳转和302跳转的区别
常用的重定向方式有: 301 redirect, 302 redirect 与 meta fresh: 301 redirect::301代表永久性转移(Permanently Moved),301重 ...
- grep egrep fgrep命令
一.grep.egrep.fgrep命令 本文中主要介绍了linux系统下grep egrep fgrep命令和正则表达式的基本参数和使用格式.方法.(注释:文中fg代表例子,) 1.1.基本定义: ...
- JavaScript 中的日期和时间
前言 本篇的介绍涵盖以下部分: 1. 时间标准指的是什么?UCT和GMT 的概念.关联和区别? 2. 时间表示标准有哪些? 3. JS 中时间的处理 日期时间标准 日期的标准就不多说了 -- 公元纪年 ...
- [置顶] 63行代码完美实现html5 贪吃蛇游戏
以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...
- CString——Left、Right、Find、ReverseFind
CString--Left.Right.Find.ReverseFind http://hi.baidu.com/shawmar/item/08b30afb0f32d46f3c1485ec CStri ...
- linux查看接口连接状态
ethtool # ethtool em1 Settings for em1: Supported ports: [ TP ] Supported link modes: 10baseT/Half 1 ...