原文 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. Android的WiFi开启与关闭

    注意:要首先注册开启和关闭WiFi的权限, <?xml version="1.0" encoding="utf-8"?> <manifest ...

  2. pyfits过滤数据更新文件。

    import pyfits as pf import numpy as np import matplotlib.pyplot as plt hdulist = pf.open("LE_ev ...

  3. form验证及图片上传

    form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...

  4. java实现从实体到SQL语句的转换（二）

    前面写过一篇生成insert语句的博客,今天把CRUD的都完善了一下,需要的上次写的获取实体信息的类,这里就不贴出来了[点击打开查看] 下面是完整的代码: package tan.code.utils ...

  5. sequence1（暴力）

    sequence1 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  6. CSS - ResetCss

    /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 */ /* 清除内外边距 */ body, h1, h2, h3, h4, h5, h ...

  7. 数据库神器：Navicat Premium

    Navicat premium是一款数据库管理工具.将此工具连接数据库,你可以从中看到各种数据库的详细信息.包括报错,等等.当然,你也可以通过他,登陆数据库,进行各种操作.Navicat Premiu ...

  8. Windows Service的官方描述，抄下来（不写obj就是LocalSystem）

    How to create a Windows service by using Sc.exe Email Print Support for Windows XP has ended Micro ...

  9. handler.postDelayed()和timerTask

    public static void scrollToListviewTop(final XListView listView) { listView.smoothScrollToPosition(0 ...

  10. Jquery学习笔记：利用find和children方法获取后代元素

    在很多场景下,需要根据一个已知的jquery对象,去查找其满足条件的后代节点. 这时可以利用 find函数和children来处理. find和children函数都可有一个参数,常见的是一个字符串, ...