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通用初始化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!