jQuery自定义多选下拉框效果

时间：2019-01-07分类：jQuery作者：编程之家

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

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

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

代码如下：

1.效果图

2.代码

rush:xhtml;">

<div class="jb51code">
<pre class="brush:css;">
.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,.2) inset; }
.dropdown-container ::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-Box; Box-shadow: 0 0 0 5px rgba(0,.2) inset; }
.dropdown-container ::-webkit-scrollbar-corner { background: transparent; }

3.Jquery插件

<div class="jb51code">
<pre class="brush:js;">
;(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)");

_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 <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>Arr=[];
for(var i=0,len=items.length;i<len;i++){
 var _d=items[i];
 if(parm.indexOf(_d.val.toString())>-1) <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>Arr.push(_d.name);
}
$(".iptdiplay").val(<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>Arr.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){