原文 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模拟一个下拉列表框的更多相关文章

  1. jquery之div模拟textarea文本域轻松实现高度自适应

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  3. jquery双向列表选择器DIV模拟版

    前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...

  4. 使用 jQuery Mockjax 插件模拟 Ajax 请求

    在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...

  5. jQuery中的模拟操作

    jQuery中的模拟操作主要是通过trigger来触发,相当于页面加载完成后不需要用户点击按钮,就可以自动触发页面中的相关事件. trigger(type,[data])可以用来模拟触发自定义事件的触 ...

  6. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  7. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  8. 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...

  9. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. Python之路Day10

    本节主要内容:memcache&redis.RabbitMQ.twisted框架 1. memcache&redis 1.1 memcache Memcached 是一个高性能的分布式 ...

  2. 有什么很好的软件是用 Qt 编写的？

    作者:尘中远链接:http://www.zhihu.com/question/19630324/answer/19365369来源:知乎 一些出名的例子如下:(wiki搬运) 3DSlicer, a ...

  3. 单实例支撑每天上亿个请求的SSDB

    SSDB 是一个 C++ 开发的 NoSQL 存储服务器, 支持 zset, map 数据结构, 可替代 Redis, 特别适合存储集合数据. SSDB 被开发和开源出来后, 已经在生产环境经受了3个 ...

  4. [置顶] 浏览器模式和标准对于javascript的影响

    今天在编写代码的时候遇到了一个莫名其妙的问题,请看下面 <html> <head> <title> Test </title> <!--<m ...

  5. cocos2d-实现读取.plist文件（使用数组CCArray）

    学习札记之cocos2d-x2.1.1实现读取.plist文件(使用数组CCArray) <?xml version="1.0" encoding="UTF-8&q ...

  6. 自己设计的SSO登录流程图

    这个图上不考虑安全加密.由于本身SSO流程图已经比較复杂了.可能还有问题,欢迎大家拍砖. 1.登录流程图: 2.退出流程图: 3.改进方面: 每一个应用登录后.直接将ticket写入session中, ...

  7. [置顶] c# datagridview‘s learn

    c#   一串数字“1122331111155”,要输出到DataGridview控件上,但是要逐个数字读取,如果上一个数字与下一个相同,则排成一列,不相同,则另外排成一列.如“11223311111 ...

  8. Eclispse 换主题、皮肤、配色，换黑色主题护眼

    链接地址:http://jingyan.baidu.com/article/6c67b1d68c03be2787bb1ed6.html Eclipse写android代码时,默认的文本和框架都是白色, ...

  9. 【转】如何在CentOS/RHEL中安装基于Web的监控系统 linux-das

    Linux-dash是一款为Linux设计的基于Web的轻量级监控面板.这个程序会实时显示各种不同的系统属性,比如CPU负载.RAM使用率.磁盘使用率.网速.网络连接.RX/TX带宽.登录用户.运行的 ...

  10. Mac删除废纸篓中的单一文件和文件夹

    http://www.macappbox.com/tips/159/ 通过Automator创建教程: 1.打开Automator并选择新建 2.选择服务类型 3.搜索Run Shell Script ...