原文 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. 理解iOS 8中的Self Sizing Cells和Dynamic Type

    http://www.cocoachina.com/ios/20140922/9717.html 在iOS 8中,苹果引入了UITableView的一项新功能--Self Sizing Cells,对 ...

  2. SSH整合，"sessionFactory " or "hibernateTemplate " is required异常

    首先遇到的问题就是HibernateDaoSupport引起的,程序中所有的DAO都继承自HibernateDaoSupport,而HibernateDaoSupport需要注入sessionfact ...

  3. 简单实用的下拉菜单（CSS+jquery）

    原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  4. linux下I2C驱动

    2C协议规定了主机和从机的概念,在驱动中采用的多是适配器(主机)和设备(从机).首先,i2c规定  Bus    -> Algorithm  算法               Adapter   ...

  5. Java--日期的使用

    Date 类: 最基础的日期时间类,返回一个相对日期的毫秒数.精确到毫秒,但不支持日期的国际化和分时区显示. Calender类: 相对于Date更加强大的时间类,是抽象类,提供了常规的日期修改功能和 ...

  6. 基于visual Studio2013解决C语言竞赛题之0524职工年龄

     题目

  7. 一步一步重写 CodeIgniter 框架 (11) —— 使用 CodeIgniter 函数库

    在完成了CI框架的类库扩展后,很自然我们就会想到函数库的扩展.函数库的扩展在 CI 中称为 helper 函数与类有不同的地方,它不能继承,只能覆盖或者添加新的函数,或者直接完全新定义的一组函数. 由 ...

  8. BZOJ 1499 NOI2005 瑰丽华尔兹 单调队列

    题目大意:给定一个m*n的地图,一些点有障碍物,钢琴初始在一个点,每一个时间段能够选择向给定的方向移动一段距离,求最长路径长 朴素DP的话,我们有T个时间段,每一个时间段有m*n个点,n个时间,一定会 ...

  9. [译]URL和URI的区别

    译者:华科小涛:http://www.cnblogs.com/hust-ghtao/: 初学http协议,就被这两个相似的术语搞蒙了,查了很多资料,总算搞清楚了.(找资料还是英文啊,靠谱...). 本 ...

  10. 一天一个类,一点也不累 之 Vector

    一天一个类,一点也不累. 今天要说的是ArrayList的亲兄弟--Vector 亲兄弟?看看“族谱” Class Vector<E> java.lang.Object java.util ...