jQuery Chosen通用初始化
一直在用Chosen这个js插件，其目的就是美化下拉框。github地址：https://harvesthq.github.io/chosen/
no_results_text："xxxxx"无搜索结果时显示的文本
allow_single_deselect：true是否允许取消选择
disable_search:true是否有搜索框出现
max_selected_options：当select为多选时，最多选择个数
官方说明文档地址
配置选项的官方说明文档地址
/*功能:Chosen通用初始化
*创建人：Brian创建时间：2016-12-13
*/
(function($j){
varchosenTool=function(el,options){
this.opts=options;
this.chosenInit();
this.chose_get_init();
this.chose_mult_set_init(this.opts.hidClassName);
this.clickEvent();
returnthis;
}
chosenTool.opts={
selectId:'',//selectId
hidClassName:'',//隐藏域Class
placeholdertxt:'',//select中placeholder文字
noresulttxt:'',//输入的名称未查到时显示的文字
dataJson:''//数据源
};
$j.fn.myChosenTool=function(opt){
varvalue,
args=Array.prototype.slice.call(arguments,1);
var$jthis=$j(this),
data=$jthis.data('chosenTool'),
options=$j.extend({},chosenTool.opts,$jthis.data(),
typeofoption==='object'&&option);
if(typeofoption==='string'){
//判断用户调用的方法是否存在
//if($j.inArray(option,allowedMethods)<0){
//thrownewError("Unknownmethod:"+option);
//}
if(!data){
return;
}
value=data[option].apply(data,args);
if(option==='destroy'){
$jthis.removeData('chosenTool');
}
}
/*插件外部调用插件内部的方法需要修改成下面形式*/
//if(typeofopt==='string'){
//if(!data){
//return;
//}
//value=data[opt].apply(data,args);
//if(opt==='destroy'){
//$jthis.removeData('chosenTool');
//}
//}
if(!data){
opt["selectId"]=$j(this).attr("id");
$jthis.data('chosenTool',(data=newchosenTool(this,opt)));
}
console.log(data);
returntypeofvalue==='undefined'?this:value;
};
chosenTool.prototype.clickEvent=function(){
var_this=this;
$j("#"+this.opts.selectId).on("change",function(){
_this.chose_get_value();
});
};
/*下拉框初始化方法*/
chosenTool.prototype.selectInfoInit=function(){
varproOPts="";
this.opts.dataJson=$j.parseJSON(this.opts.dataJson);
$j.each(this.opts.dataJson,function(index,item){
proOPts+=""+item.TextField+"";
});
$j("#"+this.opts.selectId).append(proOPts);
//初始化chosen
$j("#"+this.opts.selectId).chosen({
allow_single_deselect:true,//是否允许取消选择
placeholder_text_multiple:this.opts.placeholdertxt,//多选框没有选中任何值的时候显示的文字
no_results_text:this.opts.noresulttxt,//无搜索结果时显示的文本
search_contains:true//是否支持模糊搜索
});
};
/*对象初始化方法*/
chosenTool.prototype.chosenInit=function(){
this.selectInfoInit();
};
//私有方法，检测参数是否合法
chosenTool.prototype.isValid=function(){
return!this.options||(this.options&&typeofthis.options==="object")?true:false;
};
//数据同步
chosenTool.prototype.chose_get_init=function(){
varselectId=this.opts.selectId;
$j("#"+this.opts.selectId).chosen().change(
function(){
$j("#"+selectId).trigger("liszt:updated");//更新下拉框
});
};
//单选selectvalue获取
chosenTool.prototype.chose_get_value=function(){
varselectVal=$j("#"+this.opts.selectId).val();
$j("."+this.opts.hidClassName).val(selectVal);
};
//单选selectvalue获取
chosenTool.prototype.chose_mult_set_init=function(){
varvalues=$j("."+this.opts.hidClassName).val();
if(values&&values.indexOf(',')>0){
vararr=values.split(',');
varlength=arr.length;
varvalue='';
for(i=0;i
以上所述是小编给大家介绍的jQueryChosen通用初始化，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！