当前位置：Gxlcms > JavaScript > jQuery自定义多选下拉框效果

jQuery自定义多选下拉框效果

时间：2021-07-01 10:21:17 帮助过：9人阅读

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

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

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

代码如下：  

1.效果图

2.代码

  1. <div id="demo" class="dropdown-container">
  2.  <div class="dropdown-display">
  3.   <span></span>
  4.   <input type="text" class="iptdiplay" placeholder="请选择" readonly="readonly" />
  5.  </div>
  6.  <div class="dropdown-panel">
  7.   <div class="dropdown-search">
  8.   <span></span>
  9.   <input type="text" class="iptsearch" placeholder="关键字搜索" />
  10.   </div>
  11.   <ul class="dd-select">
  12.   <!-- area for dropdown items -->
  13.   </ul>
  14.   <div class="dropdown-opt">
  15.   <button class="dd-btn ok">确定</button>
  16.   <button class="dd-btn cancel">取消</button>
  17.   </div>
  18.  </div>
  19.  </div> 

  1. .dropdown-container{
  2.  display: block;
  3.  width: 200px;
  4.  height: 30px;
  5.  padding: 0px;
  6.  position: relative;
  7.  margin: 0px auto;
  8. }
  9. .dropdown-display{
  10.  display: block;
  11.  height: 30px;
  12.  position: absolute;
  13.  top: 0;
  14.  width:100%;
  15.  margin: 0px;
  16.  border:1px solid steelblue;
  17. }
  18. .dropdown-display span{
  19.  background: url(../static/choose_down_icon_01.png) no-repeat left 8px;
  20.  display: block;
  21.  height: 25px;
  22.  width: 10px;
  23.  position: absolute;
  24.  right: 5px;
  25.  top: 3px;
  26. }
  27. .dropdown-display input[class='iptdiplay']{
  28.  border: none;
  29.  border-color: transparent;
  30.  background: transparent;
  31.  border-radius: 0px;
  32.  box-shadow: none;
  33.  height: 30px;
  34.  width: 100%;
  35.  margin: 0px;
  36.  box-sizing: border-box;
  37.  box-shadow: none;
  38.  padding-left: 10px;
  39.  padding-right: 18px;
  40.  outline: none;
  41.  cursor: pointer;
  42.  text-overflow: ellipsis;
  43. }
  44. .dropdown-panel {
  45.  position: absolute;
  46.  top: 32px;
  47.  width:100%;
  48.  padding: 0px;
  49.  display: none;
  50.  border-left: 1px solid steelblue;
  51.  border-bottom: 1px solid steelblue;
  52.  border-right: 1px solid steelblue;
  53. }
  54. .dropdown-panel .dropdown-search{
  55.  display: block;
  56.  width: 100%;
  57.  height: 30px;
  58. }
  59. .dropdown-search span{
  60.  background: url(../static/chosen-sprite.png) no-repeat 100% -20px,linear-gradient(#eee 1%,#fff 15%);
  61.  display: block;
  62.  height: 25px;
  63.  width: 20px;
  64.  position: absolute;
  65.  right: 0px;
  66.  top: 3px;
  67. }
  68. .dropdown-search input[class='iptsearch']{
  69.  border: none;
  70.  border-color: transparent;
  71.  background: transparent;
  72.  border-radius: 0px;
  73.  box-shadow: none;
  74.  height: 30px;
  75.  width: 100%;
  76.  margin: 0px;
  77.  box-sizing: border-box;
  78.  box-shadow: none;
  79.  padding-left: 10px;
  80.  outline: none;
  81. }
  82. .dropdown-panel .dd-select{
  83.  display: block;
  84.  width:100%;
  85.  position: relative;
  86.  height: auto;
  87.  margin: 0px;
  88.  padding:0px !important;
  89.  box-sizing: border-box;
  90.  list-style-type: none;
  91.  text-align: left;
  92.  max-height: 300px;
  93.  overflow-y: scroll;
  94.  overflow-x: hidden;
  95. }
  96. .dd-item{
  97.  display: block;
  98.  height: 30px;
  99.  line-height: 30px;
  100.  padding-left: 5px;
  101.  border-bottom: 1px solid steelblue;
  102.  font-size: 13px;
  103.  z-index: 8;
  104.  overflow: hidden;
  105. }
  106. .dd-item .dd-v{
  107.  width: 0px;
  108.  height: 0px;
  109.  display: none;
  110. }
  111. .dd-item .dd-k{
  112.  z-index: 8;
  113.  padding-left: 15px;
  114. }
  115. .dd-item:first-child{
  116.  border-top: 1px solid steelblue;
  117. }
  118. .dd-item:last-child{
  119.  border-bottom: none;
  120. }
  121. .dd-select .on{
  122.  background-color: steelblue\9;
  123. }
  124. .dd-item:hover::before,.dd-item:hover before{
  125.  content:'\2714';
  126.  position: absolute;
  127.  left: 0px;
  128.  color: #79a979
  129.  z-index: 9;
  130.  font-size: 16px;
  131.  padding-right: 3px;
  132.  padding-left: 2px;
  133.  background-color: #fff;
  134. }
  135. .dd-select .on::before,.dd-select .on before{
  136.  content:'\2714';
  137.  position: absolute;
  138.  left: 0px;
  139.  color: green;
  140.  z-index: 9;
  141.  font-size: 16px;
  142.  padding-right: 3px;
  143.  padding-left: 2px;
  144.  background-color: #fff;
  145. }
  146. .dd-item:hover{
  147.  cursor: pointer;
  148.  background-color: #ccc;
  149. }
  150. .dropdown-container .dropdown-opt{
  151.  width:100%;
  152.  text-align: center;
  153.  position: absolute;
  154.  left: -1px;
  155.  bottom: -30px;
  156.  padding: 0px;
  157.  border-left: 1px solid steelblue;
  158.  border-bottom: 1px solid steelblue;
  159.  border-right: 1px solid steelblue;
  160.  box-sizing: content-box;
  161. }
  162. .dropdown-container .dd-btn{
  163.  color: #333;
  164.  height: 28px !important;
  165.  display: inline-block;
  166.  background-color: #e6e6e6;
  167.  border-color: #adadad;
  168.  user-select: none;
  169.  background-image: none;
  170.  border: 1px solid transparent;
  171.  border-radius: 4px;
  172.  margin: 0px 15px;
  173. }
  174. .dropdown-container .dd-btn:hover{
  175.  color:#fff;
  176.  background-color: steelblue;
  177. }
  178. /* scrollbar */
  179. .dropdown-container ::-webkit-scrollbar { width: 5px; height: 10px; } 
  180. .dropdown-container ::-webkit-scrollbar-track, 
  181. .dropdown-container ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } 
  182. .dropdown-container ::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; } 
  183. .dropdown-container ::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; } 
  184. .dropdown-container ::-webkit-scrollbar-corner { background: transparent; }

3.Jquery插件

  1. ;(function ($,window,document,undefined) {
  2.  var _pluginName="jqDropdown";
  3.  var defaults = {
  4.   items:[]
  5.  };
  6.  var parm=[];
  7.  //es5 filter hack
  8.  if (!Array.prototype.filter){
  9.    Array.prototype.filter = function(fun){
  10.    var len = this.length;
  11.    if (typeof fun != "function") throw new TypeError(); 
  12.     var res = new Array();
  13.    var _arg = arguments[1];
  14.    for (var i = 0; i < len; i++){
  15.      if (i in this){
  16.      var val = this[i];
  17.      if (fun.call(_arg, val, i, this)) res.push(val);
  18.      }
  19.    } 
  20.     return res;
  21.    };
  22.  }
  23.  if(!Array.prototype.indexOf) {
  24.   Array.prototype.indexOf = function (elem, startFrom) {
  25.    var startFrom = startFrom || 0;
  26.    if (startFrom > this.length) return -1;
  27.    for (var i = 0; i < this.length; i++) {
  28.     if (this[i] == elem && startFrom <= i) {
  29.      return i;
  30.     } else if (this[i] == elem && startFrom > i) {
  31.      return -1;
  32.     }
  33.    }
  34.    return -1;
  35.   }
  36.  }
  37.  var init = function (o,opts,okFn,cancelFn) {
  38.   var _panel=$(o);
  39.   var _ul=_panel.find(".dd-select:eq(0)");
  40.   function createDropItems(items,p){
  41.    p=p||[];
  42.    _ul.empty();
  43.    var _curretVal=$(".iptdiplay").val();
  44.    for(var i=0,len=items.length;i<len;i++){
  45.     var _d=items[i];
  46.     var _li='<li class="{{DC}}"> <span class="dd-v">{{DV}}</span><span class="dd-k">{{DK}}</span></li>';
  47.     _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'));
  48.    }
  49.    _panel.find('.dd-item').click(function(e){
  50.     var $this=$(this);
  51.     var _k_= $this.find('.dd-k:eq(0)').text()
  52.     var _v_= $this.find('.dd-v:eq(0)').text();
  53.     if($this.hasClass('on')){
  54.      parm=parm.filter(function(t){ return t!=_v_; });
  55.      $this.removeClass('on');
  56.     }else{
  57.      parm.push(_v_);
  58.      $this.addClass('on');
  59.     }
  60.     var disArr=[];
  61.     for(var i=0,len=items.length;i<len;i++){
  62.      var _d=items[i];
  63.      if(parm.indexOf(_d.val.toString())>-1) disArr.push(_d.name);
  64.     }
  65.     $(".iptdiplay").val(disArr.join('|'));
  66.    });
  67.   };
  68.   //init to build dropdown items
  69.   createDropItems(opts.items||[]);
  70.   function toggleDrop(){
  71.    $(".dropdown-panel").slideToggle();
  72.   };
  73.   
  74.   //search
  75.   $(".iptsearch").bind("input propertychange",function(e){
  76.    if(!e) return;
  77.    var _sk=e.currentTarget.value;
  78.    var _items=opts.items||[];
  79.    createDropItems(_items.filter(function(d){
  80.     return d.name.indexOf(_sk)>-1; 
  81.    }),parm);
  82.   });
  83.   //Toggle dropdown
  84.   $(".dropdown-display").click(function(){
  85.    toggleDrop();
  86.   });
  87.   //OK button event
  88.   $(".dropdown-opt button.ok").click(function(){
  89.    toggleDrop();
  90.    okFn&&okFn.apply(this,[parm]);
  91.   });
  92.   //Cancel button event
  93.   $(".dropdown-opt button.cancel").click(function(){
  94.    toggleDrop();
  95.    cancelFn&&cancelFn.call(this);
  96.   });
  97.  };
  98.  $.fn[_pluginName] = function (options,okFn,cancelFn) {
  99.   var options = $.extend(defaults, options);
  100.   return this.each(function () {
  101.    init(this,options,okFn,cancelFn);
  102.   });
  103.  }
  104. })(jQuery,window,document);

4.页面调用示例

  1. <script>
  2.  var data=[
  3.   { name:'http://58.100.3.12',val:1 },
  4.   { name:'http://44.168.4.13',val:2 },
  5.   { name:'http://192.168.2.1/sdfsf/234234/234/2/34/23',val:3 },
  6.   { name:'http://220.199.5.14',val:4 },
  7.   { name:'http://127.1.62.15',val:5 },
  8.   { name:'http://127.1.62.15',val:6 },
  9.   { name:'http://127.1.62.15',val:7 },
  10.   { name:'http://127.1.62.15',val:8 },
  11.   { name:'http://127.1.62.15',val:9 },
  12.   { name:'http://127.1.62.15',val:10 },
  13.   { name:'http://127.1.62.15',val:11 },
  14.   { name:'http://127.1.62.15',val:12 },
  15.   { name:'http://127.1.62.15',val:13 },
  16.   { name:'http://127.1.62.15',val:14},
  17.   { name:'http://127.1.62.15',val:15 },
  18.   { name:'http://127.1.62.15',val:16 },
  19.   { name:'http://127.1.62.15',val:17 },
  20.   { name:'http://127.1.62.15',val:18 },
  21.   { name:'http://127.1.62.15',val:19 },
  22.   { name:'http://127.1.62.15',val:20 },
  23.   { name:'http://127.1.62.15',val:21 },
  24.   { name:'http://127.1.62.15',val:22 },
  25.   { name:'http://127.1.62.15',val:23 },
  26.   { name:'http://127.1.62.15',val:24 },
  27.   { name:'http://127.1.62.15',val:25 },
  28.   { name:'http://127.1.62.15',val:26 },
  29.   { name:'http://127.1.62.15',val:27 },
  30.   { name:'http://127.1.62.15',val:28 },
  31.   { name:'http://127.1.62.15',val:29 }
  32.  ];
  33.  $("#demo").jqDropdown({ items:data },function(e){
  34.   console.dir(e);
  35.  },function(){
  36.   console.log('canceled by user !');
  37.  });
  38.  </script>

5.输出

6.不足

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

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

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

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！