简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  사용자 정의 다중 선택 드롭다운 상자의 효과를 실현하기 위해 jQuery를 사용하는 방법에 대해 이야기해 보겠습니다.

사용자 정의 다중 선택 드롭다운 상자의 효과를 실현하기 위해 jQuery를 사용하는 방법에 대해 이야기해 보겠습니다.

巴扎黑
巴扎黑원래의
2018-05-19 16:26:181913검색

这篇文章主要为大家详细介绍了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浏览器中显示有问题 后期需要改进

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

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

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

위 내용은 사용자 정의 다중 선택 드롭다운 상자의 효과를 실현하기 위해 jQuery를 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery css3 事件
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery를 사용하여 더블클릭 테이블 편집 기능을 구현하는 방법에 대한 설명다음 기사：jQuery를 사용하여 더블클릭 테이블 편집 기능을 구현하는 방법에 대한 설명

관련 기사

더보기