首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery自定义多选下拉框效果

Posted in jQuery onJune 19, 2017

项目中需要自定义一个下拉框多选插件，业务问题还是自己实现比较好

通过$.fn 向jQuery添加新的方法

下拉数据通过参数传递进去，通过调用该插件时接收，选择后的确定与取消事件采用事件传递方式

代码如下：  

1.效果图

jQuery自定义多选下拉框效果

2.代码

<div id="demo" class="dropdown-container">
 <div class="dropdown-display">
  <span></span>
  <input type="text" class="iptdiplay" placeholder="请选择" readonly="readonly" />
 </div>
 <div class="dropdown-panel">
  <div class="dropdown-search">
  <span></span>
  <input type="text" class="iptsearch" placeholder="关键字搜索" />
  </div>
  <ul class="dd-select">
  <!-- area for dropdown items -->
  </ul>
  <div class="dropdown-opt">
  <button class="dd-btn ok">确定</button>
  <button class="dd-btn cancel">取消</button>
  </div>
 </div>
 </div>
.dropdown-container{
 display: block;
 width: 200px;
 height: 30px;
 padding: 0px;
 position: relative;
 margin: 0px auto;
}

.dropdown-display{
 display: block;
 height: 30px;
 position: absolute;
 top: 0;
 width:100%;
 margin: 0px;
 border:1px solid steelblue;
}
.dropdown-display span{
 background: url(../static/choose_down_icon_01.png) no-repeat left 8px;
 display: block;
 height: 25px;
 width: 10px;
 position: absolute;
 right: 5px;
 top: 3px;
}
.dropdown-display input[class='iptdiplay']{
 border: none;
 border-color: transparent;
 background: transparent;
 border-radius: 0px;
 box-shadow: none;
 height: 30px;
 width: 100%;
 margin: 0px;
 box-sizing: border-box;
 box-shadow: none;
 padding-left: 10px;
 padding-right: 18px;
 outline: none;
 cursor: pointer;
 text-overflow: ellipsis;
}
.dropdown-panel {
 position: absolute;
 top: 32px;
 width:100%;
 padding: 0px;
 display: none;
 border-left: 1px solid steelblue;
 border-bottom: 1px solid steelblue;
 border-right: 1px solid steelblue;
}

.dropdown-panel .dropdown-search{
 display: block;
 width: 100%;
 height: 30px;
}
.dropdown-search span{
 background: url(../static/chosen-sprite.png) no-repeat 100% -20px,linear-gradient(#eee 1%,#fff 15%);
 display: block;
 height: 25px;
 width: 20px;
 position: absolute;
 right: 0px;
 top: 3px;
}
.dropdown-search input[class='iptsearch']{
 border: none;
 border-color: transparent;
 background: transparent;
 border-radius: 0px;
 box-shadow: none;
 height: 30px;
 width: 100%;
 margin: 0px;
 box-sizing: border-box;
 box-shadow: none;
 padding-left: 10px;
 outline: none;
}
.dropdown-panel .dd-select{
 display: block;
 width:100%;
 position: relative;
 height: auto;
 margin: 0px;
 padding:0px !important;
 box-sizing: border-box;
 list-style-type: none;
 text-align: left;
 max-height: 300px;
 overflow-y: scroll;
 overflow-x: hidden;
}
.dd-item{
 display: block;
 height: 30px;
 line-height: 30px;
 padding-left: 5px;
 border-bottom: 1px solid steelblue;
 font-size: 13px;
 z-index: 8;
 overflow: hidden;
}
.dd-item .dd-v{
 width: 0px;
 height: 0px;
 display: none;
}
.dd-item .dd-k{
 z-index: 8;
 padding-left: 15px;
}
.dd-item:first-child{
 border-top: 1px solid steelblue;
}
.dd-item:last-child{
 border-bottom: none;
}
.dd-select .on{
 background-color: steelblue\9;
}
.dd-item:hover::before,.dd-item:hover before{
 content:'\2714';
 position: absolute;
 left: 0px;
 color: #79a979
 z-index: 9;
 font-size: 16px;
 padding-right: 3px;
 padding-left: 2px;
 background-color: #fff;
}
.dd-select .on::before,.dd-select .on before{
 content:'\2714';
 position: absolute;
 left: 0px;
 color: green;
 z-index: 9;
 font-size: 16px;
 padding-right: 3px;
 padding-left: 2px;
 background-color: #fff;
}
.dd-item:hover{
 cursor: pointer;
 background-color: #ccc;
}
.dropdown-container .dropdown-opt{
 width:100%;
 text-align: center;
 position: absolute;
 left: -1px;
 bottom: -30px;
 padding: 0px;
 border-left: 1px solid steelblue;
 border-bottom: 1px solid steelblue;
 border-right: 1px solid steelblue;
 box-sizing: content-box;
}
.dropdown-container .dd-btn{
 color: #333;
 height: 28px !important;
 display: inline-block;
 background-color: #e6e6e6;
 border-color: #adadad;
 user-select: none;
 background-image: none;
 border: 1px solid transparent;
 border-radius: 4px;
 margin: 0px 15px;
}
.dropdown-container .dd-btn:hover{
 color:#fff;
 background-color: steelblue;
}
/* scrollbar */
.dropdown-container ::-webkit-scrollbar { width: 5px; height: 10px; } 
.dropdown-container ::-webkit-scrollbar-track, 
.dropdown-container ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } 
.dropdown-container ::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; } 
.dropdown-container ::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; } 
.dropdown-container ::-webkit-scrollbar-corner { background: transparent; }

3.Jquery插件

;(function ($,window,document,undefined) {
 var _pluginName="jqDropdown";

 var defaults = {
  items:[]
 };

 var parm=[];

 //es5 filter hack
 if (!Array.prototype.filter){
   Array.prototype.filter = function(fun){
   var len = this.length;
   if (typeof fun != "function") throw new TypeError(); 
    var res = new Array();
   var _arg = arguments[1];
   for (var i = 0; i < len; i++){
     if (i in this){
     var val = this[i];
     if (fun.call(_arg, val, i, this)) res.push(val);
     }
   } 
    return res;
   };
 }
 if(!Array.prototype.indexOf) {
  Array.prototype.indexOf = function (elem, startFrom) {
   var startFrom = startFrom || 0;
   if (startFrom > this.length) return -1;

   for (var i = 0; i < this.length; i++) {
    if (this[i] == elem && startFrom <= i) {
     return i;
    } else if (this[i] == elem && startFrom > i) {
     return -1;
    }
   }
   return -1;
  }
 }
 var init = function (o,opts,okFn,cancelFn) {
  var _panel=$(o);
  var _ul=_panel.find(".dd-select:eq(0)");

  function createDropItems(items,p){
   p=p||[];
   _ul.empty();
   var _curretVal=$(".iptdiplay").val();
   for(var i=0,len=items.length;i<len;i++){
    var _d=items[i];
    var _li='<li class="{{DC}}"> <span class="dd-v">{{DV}}</span><span class="dd-k">{{DK}}</span></li>';
    _ul.append(_li.replace(/{{DV}}/g, _d.val).replace(/{{DK}}/g,_d.name).replace(/{{DC}}/g,p.indexOf(_d.val.toString())>-1?'dd-item on':'dd-item'));
   }

   _panel.find('.dd-item').click(function(e){
    var $this=$(this);
    var _k_= $this.find('.dd-k:eq(0)').text()
    var _v_= $this.find('.dd-v:eq(0)').text();
    if($this.hasClass('on')){
     parm=parm.filter(function(t){ return t!=_v_; });
     $this.removeClass('on');
    }else{
     parm.push(_v_);
     $this.addClass('on');
    }

    var disArr=[];
    for(var i=0,len=items.length;i<len;i++){
     var _d=items[i];
     if(parm.indexOf(_d.val.toString())>-1) disArr.push(_d.name);
    }
    $(".iptdiplay").val(disArr.join('|'));
   });
  };

  //init to build dropdown items
  createDropItems(opts.items||[]);

  function toggleDrop(){

   $(".dropdown-panel").slideToggle();
  };

  
  //search
  $(".iptsearch").bind("input propertychange",function(e){
   if(!e) return;
   var _sk=e.currentTarget.value;
   var _items=opts.items||[];
   createDropItems(_items.filter(function(d){

    return d.name.indexOf(_sk)>-1; 
   }),parm);
  });

  //Toggle dropdown
  $(".dropdown-display").click(function(){

   toggleDrop();
  });

  //OK button event
  $(".dropdown-opt button.ok").click(function(){
   toggleDrop();
   okFn&&okFn.apply(this,[parm]);
  });

  //Cancel button event
  $(".dropdown-opt button.cancel").click(function(){

   toggleDrop();
   cancelFn&&cancelFn.call(this);
  });
 };

 $.fn[_pluginName] = function (options,okFn,cancelFn) {

  var options = $.extend(defaults, options);
  return this.each(function () {

   init(this,options,okFn,cancelFn);
  });
 }
})(jQuery,window,document);

4.页面调用示例

<script>

 var data=[
  { name:'http://58.100.3.12',val:1 },
  { name:'http://44.168.4.13',val:2 },
  { name:'http://192.168.2.1/sdfsf/234234/234/2/34/23',val:3 },
  { name:'http://220.199.5.14',val:4 },
  { name:'http://127.1.62.15',val:5 },
  { name:'http://127.1.62.15',val:6 },
  { name:'http://127.1.62.15',val:7 },
  { name:'http://127.1.62.15',val:8 },
  { name:'http://127.1.62.15',val:9 },
  { name:'http://127.1.62.15',val:10 },
  { name:'http://127.1.62.15',val:11 },
  { name:'http://127.1.62.15',val:12 },
  { name:'http://127.1.62.15',val:13 },
  { name:'http://127.1.62.15',val:14},
  { name:'http://127.1.62.15',val:15 },
  { name:'http://127.1.62.15',val:16 },
  { name:'http://127.1.62.15',val:17 },
  { name:'http://127.1.62.15',val:18 },
  { name:'http://127.1.62.15',val:19 },
  { name:'http://127.1.62.15',val:20 },
  { name:'http://127.1.62.15',val:21 },
  { name:'http://127.1.62.15',val:22 },
  { name:'http://127.1.62.15',val:23 },
  { name:'http://127.1.62.15',val:24 },
  { name:'http://127.1.62.15',val:25 },
  { name:'http://127.1.62.15',val:26 },
  { name:'http://127.1.62.15',val:27 },
  { name:'http://127.1.62.15',val:28 },
  { name:'http://127.1.62.15',val:29 }
 ];

 $("#demo").jqDropdown({ items:data },function(e){

  console.dir(e);
 },function(){

  console.log('canceled by user !');
 });

 </script>

5.输出

jQuery自定义多选下拉框效果

6.不足

页面样式在不支持css3浏览器中显示有问题 后期需要改进

     下拉数据为一次性渲染 如有需要 可设置滚动加载

     下拉框滚动条的美化未兼容所有浏览器

      搜索时检索数据直接源自页面数据 所有需要添加延迟处理 获取服务端数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery自定义多选下拉框效果

- Author -

迷惘却坚定

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现视频展示效果
May 30 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
Anaconda(2) 公共键(1) shell脚本(1) 有序排列(1) key(1) 数据加密(1) pycryto(1) python-pcl(1) kafka(2) 遍历文件夹(1)
You might like
如何使用PHP中的字符串函数
2006/11/24 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
php无序树实现方法
2015/07/28 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python控制Firefox方法总结
2019/06/03 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
HearthSong官网：儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
Pandora西班牙官方商店：PandoraShop.es
2020/10/05 全球购物
影视制作岗位职责
2013/12/04 职场文书
初中地理教学反思
2014/01/11 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书