原文 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. Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建（转）

    这篇文章主要讲解使用eclipse对Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建过程,包括里面步骤和里面的配置文件如何配置等等都会详细说明. 如果还没有搭建好环境( ...

  2. oschina开源硬件其它开源，开源硬件

    硬件驱动/工具 25Linux内核 101桌面环境 40开源字体 58嵌入式操作系统 33输入法 110开源硬件 57开源图书 5开源家居 17物联网 87开源货币/比特币 32NASA 开源项目 1 ...

  3. ACM比赛（第二次A）

    ime Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Description There is ...

  4. Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...

  5. 解决linux下javac -version和java -version版本显示不一致

    解决linux下javac -version和java -version版本显示不一致 [javascript] view plaincopy [root@localhost usr]# $JAVA_ ...

  6. 《C语言深度解剖》面试题整理

    请在40分钟内完成以下20道C语言基础题.在没有任何提示的情况下,如果能得满分,那么你可以扔掉本书了,你的水平已经大大超过了作者:如果能的80分以上,说明你的C语言基础还不错,学习本书可能会比较轻松: ...

  7. ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables opt

    mysql跳过权限: mysqld -nt --skip-grant-tables opt 登录:mysql -uroot -p 修改root密码 set password for 'root'@'l ...

  8. JIRA初步

    JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问题跟踪管理软件工具.可以对各种类型的问题进行跟踪管理.包含缺陷.任务.需求.改进等.JIRA採用J2EE技术.可以跨平台部署.它正被广泛 ...

  9. jQuery 删除HTML元�

    jQuery使用以下两个方法来删除或是清空某个HTML元素. remove() – 删除指定的元素(包含其子元素) empty() – 清空指定元素的子元素 比如: <!DOCTYPE html ...

  10. boost 轻量级信号量

    #include <boost/thread/condition_variable.hpp> #include <boost/thread/mutex.hpp>     #in ...