首页
所有分类
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序列化后的表单值转换成Json
Jun 16 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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
德生(17) 修复(2) TECSUN(1) PL-365(1) 电子管(5) 海燕B411(1) 接收机(2) 东方红(1) 车机(1) 再生机(1)
You might like
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
Laravel 4.2 中队列服务（queue）使用感受
2014/10/30 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
Steiff台湾官网：德国金耳釦泰迪熊
2019/12/26 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
银行求职推荐信范文
2013/11/30 职场文书
计算机专业求职信
2014/06/02 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
高二语文教学反思
2016/02/16 职场文书
《打电话》教学反思
2016/02/22 职场文书
个人道歉信大全
2019/04/11 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
详解Python牛顿插值法
2021/05/11 Python