search

Home  >  Article  >  Web Front-end  >  jQuery custom multi-select drop-down box effect implementation method

jQuery custom multi-select drop-down box effect implementation method

小云云
小云云Original
2018-01-06 13:09:522661browse

项目中需要自定义一个下拉框多选插件，业务问题还是自己实现比较好。本文主要为大家详细介绍了jQuery自定义多选下拉框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

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

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

代码如下：  

1.效果图

2.代码


<p id="demo" class="dropdown-container">
 <p class="dropdown-display">
  <span></span>
  <input type="text" class="iptdiplay" placeholder="请选择" readonly="readonly" />
 </p>
 <p class="dropdown-panel">
  <p class="dropdown-search">
  <span></span>
  <input type="text" class="iptsearch" placeholder="关键字搜索" />
  </p>
  <ul class="dd-select">
  <!-- area for dropdown items -->
  </ul>
  <p class="dropdown-opt">
  <button class="dd-btn ok">确定</button>
  <button class="dd-btn cancel">取消</button>
  </p>
 </p>
 </p>


.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=&#39;iptdiplay&#39;]{
 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=&#39;iptsearch&#39;]{
 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:&#39;\2714&#39;;
 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:&#39;\2714&#39;;
 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=&#39;<li class="{{DC}}"> <span class="dd-v">{{DV}}</span><span class="dd-k">{{DK}}</span></li>&#39;;
    _ul.append(_li.replace(/{{DV}}/g, _d.val).replace(/{{DK}}/g,_d.name).replace(/{{DC}}/g,p.indexOf(_d.val.toString())>-1?&#39;dd-item on&#39;:&#39;dd-item&#39;));
   }

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

    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(&#39;|&#39;));
   });
  };

  //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:&#39;http://58.100.3.12&#39;,val:1 },
  { name:&#39;http://44.168.4.13&#39;,val:2 },
  { name:&#39;http://192.168.2.1/sdfsf/234234/234/2/34/23&#39;,val:3 },
  { name:&#39;http://220.199.5.14&#39;,val:4 },
  { name:&#39;http://127.1.62.15&#39;,val:5 },
  { name:&#39;http://127.1.62.15&#39;,val:6 },
  { name:&#39;http://127.1.62.15&#39;,val:7 },
  { name:&#39;http://127.1.62.15&#39;,val:8 },
  { name:&#39;http://127.1.62.15&#39;,val:9 },
  { name:&#39;http://127.1.62.15&#39;,val:10 },
  { name:&#39;http://127.1.62.15&#39;,val:11 },
  { name:&#39;http://127.1.62.15&#39;,val:12 },
  { name:&#39;http://127.1.62.15&#39;,val:13 },
  { name:&#39;http://127.1.62.15&#39;,val:14},
  { name:&#39;http://127.1.62.15&#39;,val:15 },
  { name:&#39;http://127.1.62.15&#39;,val:16 },
  { name:&#39;http://127.1.62.15&#39;,val:17 },
  { name:&#39;http://127.1.62.15&#39;,val:18 },
  { name:&#39;http://127.1.62.15&#39;,val:19 },
  { name:&#39;http://127.1.62.15&#39;,val:20 },
  { name:&#39;http://127.1.62.15&#39;,val:21 },
  { name:&#39;http://127.1.62.15&#39;,val:22 },
  { name:&#39;http://127.1.62.15&#39;,val:23 },
  { name:&#39;http://127.1.62.15&#39;,val:24 },
  { name:&#39;http://127.1.62.15&#39;,val:25 },
  { name:&#39;http://127.1.62.15&#39;,val:26 },
  { name:&#39;http://127.1.62.15&#39;,val:27 },
  { name:&#39;http://127.1.62.15&#39;,val:28 },
  { name:&#39;http://127.1.62.15&#39;,val:29 }
 ];

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

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

  console.log(&#39;canceled by user !&#39;);
 });

 </script>

5.输出

6.不足

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

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

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

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

相关推荐：

php实现三级级联下拉框 多选下拉框 下拉框插件 下拉框代

jquery multiSelect 多选下拉框_jquery

一个简单的jquery的多选下拉框(自写)_jquery

The above is the detailed content of jQuery custom multi-select drop-down box effect implementation method. For more information, please follow other related articles on the PHP Chinese website!

php jquery css3 事件
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example sharing of simple accordion effect using jQueryNext article：Example sharing of simple accordion effect using jQuery

Related articles

See more