首页
所有分类
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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 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
自荐信(981) J2EE面试题(19) 求职信(1029) Ruby面试题(15) Delphi面试题(13) 自我评价(886) 推荐信(292) 自我鉴定(671) 岗位职责(1324) SOA面试题(9)
You might like
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
深入理解令牌认证机制（token）
2019/08/22 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python记录详细调用堆栈日志的方法
2015/05/05 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
Nike比利时官网：Nike.com (BE)
2019/02/07 全球购物
第二课堂活动总结
2014/05/07 职场文书
运动会演讲稿50字
2014/08/25 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
银行授权委托书范本
2014/10/04 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
Python使用scapy模块发包收包
2021/05/07 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android
利用python做数据拟合详情
2021/11/17 Python
python中pymysql包操作数据库方法
2022/04/19 Python