基本信息
源码名称：基于Jquery实现多选下拉的插件
源码大小：0.06M
文件格式：.rar
开发语言：js
更新时间：2021-05-05
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
本插件基于JQuery插件标准开发，可以用来学习，项目中也可以用
;(function($){//;表示将前面的作为一个语句
$.fn.multselect=function(options){//插件名称
var defaults={
url:"",//ajax请求数据 数据格式[{"id":"1","name":"张三"},{"id":"123","name":"李四"}]
width:"330px",//div宽 必须是像素值
disabled:false,//插件禁用
panelHeight:"150px",//下拉画布高 auto
onSelect:function(el){//选中回调函数
},
onEcho:[]//做回显 data格式[1,2,3,4,5] select中的value
}
var options=$.extend(defaults,options);
return this.each(function(){
var uid="ui" new Date().getTime();//控件ID
var body=$("body"),jqObj;
var _this=$(this);
var position=_this.offset();
var originObj={//获取select内容
name:_this.attr("name"),//name属性
//通过单选加载本地数据
getOptions:function(){//获取options 值 value
var obj=[];//获取value ，值
_this.find("option").each(function(){
var value=this.value;
var html=this.innerHTML;
var o={};
o[value]=html;
obj.push(o);
})
return obj;
}
};
var box_html="<div id='" uid "' class='multselect'><i class='icon-right'></i><div class='kid kid-t'><ul></ul></div></div>",
content_html="<span></span>",
submit_input="<input name='' style='display:none;' value=''></input>";
var multselect={
//初始化option
_initial:function(){
if (options.url!=""){//加载远程数据
$.ajax({
url:options.url,
dataType:"json",
async:false,
success:function(data){
if($.isArray(data)){
var h;
for(var i=0,j=data.length;i<j;i ){
h ='<option value="' data[i].id '">' data[i].name '</option>';
}
_this.append(h);
multselect.initHtml();
}else{
console.debug("数据格式错误");
}
}
});
}else if(_this.find("option").length>0){//加载本地数据
multselect.initHtml();
}
},
initHtml:function(){//页面初始化控价
_this.css({opacity:0});//select隐藏
_this.after(box_html);
jqObj=$("#" uid);
this.changeCSS(jqObj);
/*获取ul中的li的集合*/
var optionshtml="";
var arr=[];//存储select中的value值
var _origin=originObj.getOptions();
for(var i=0;i<_origin.length;i ){
var $key,$value;
for(var key in _origin[i]){
$key=key;
$value=_origin[i][key];
}
arr.push($key);
optionshtml ='<li data-id="' $key '">' $value '</li>';
}
jqObj=multselect.setKidDiv_Zindex(jqObj);
/*加载span input*/
jqObj.append(content_html).append(submit_input);;
jqObj.find(".kid ul").append(optionshtml);//加载li集合
//回显
var data=options.onEcho;
if(data&&$.isArray(data)){
var text="";
for(var i=0;i<data.length;i ){
if($.inArray(data[i],arr)=="-1"){//判断select value集合有无
break;
}
var $li=jqObj.find("li[data-id='" data[i] "']");
$li.addClass("select");
text =text==""?$li.html():"," $li.html();
}
jqObj.find("span").html(text);
jqObj.find("input").val(data.join());
}
this.setEvents();//初始化事件集
if(options.disabled==true){//禁用
jqObj.unbind("click");
jqObj.addClass("disabled");
}
},
setEvents:function(){
var event=this;
//鼠标单击加载active样式
jqObj.delegate("li","click",function(){
var text=$(this).get(0).innerHTML;
var id=$(this).data("id");
if($(this).is(".select")){
event.removeContentOptions($(this),id);
}else{
event.addContentOptions($(this),text,id);
}
return false;
});
//单击展开下拉
jqObj.bind("click",function(){
var kidBox=$(this).find(".kid");
if(kidBox.is(":hidden")){
kidBox.show();
$(this).addClass("mult-b");
$(this).find("i").removeClass().addClass("icon-bottom");
}else{
kidBox.hide();
$(this).removeClass("mult-b");
$(this).find("i").removeClass().addClass("icon-right");
}
}),
//鼠标移入移出
jqObj.delegate("li","mouseover",function(){
$(this).addClass("active");
}),
jqObj.delegate("li","mouseleave",function(){
$(this).removeClass("active");
}),
//点击控件外进行收起控件
$(document).click(function(event){
body.find(".kid").hide();
jqObj.removeClass("mult-b");
jqObj.find("i").removeClass().addClass("icon-right");
});
jqObj.click(function(event){
event.stopPropagation();
});
},
//修改样式
changeCSS:function(obj){
jqObj.css({
"position":"absolute",
"width":options.width,
"top":position.top "px",
"left":position.left "px",
"z-index":0});
jqObj.find(".kid").css({
"display":"none",
"overflow-y":"auto",
"width":options.width,
"height":options.panelHeight
});
},
//删除li 以及 span中内容
removeContentOptions:function(obj,id){
obj.removeClass("select");
jqObj.find("span").html(multselect.getContent());
//设置input中value
var val="";
jqObj.find("li[class='select']").each(function(index,el){
var _id=$(el).data("id");
val =val==""?_id:"," _id;
})
jqObj.find("input").val(val);
},
//添加li 以及 span中内容
addContentOptions:function(obj,text,id){
obj.addClass("select");
jqObj.find("span").html(multselect.getContent());
//设置input中value
var val="";
jqObj.find("li[class='select']").each(function(index,el){//选中第一个 input值没有？？？
var _id=$(el).data("id");
val =val==""?_id:"," _id;
})
jqObj.find("input").val(val);
_this.find("option[value='" id "']").attr("selected","selected");
//回调函数
options.onSelect(_this);
},
//刷新页面显示内容
getContent:function(){
var content="";
jqObj.find("li").each(function(){
if ($(this).hasClass("select")) {
content =content==""?$(this).html():"," $(this).html();
}
});
return content;
},
//解决两个下拉框重叠显示问题
setKidDiv_Zindex:function(jqObj){
var length=body.find(".multselect").length;
if(typeof length=='number'){
jqObj.css("z-index",$(document).height()-position.top);//通过高度加载 越高 值越大
}
return jqObj;
}
};
multselect._initial();
})
}
})(jQuery);