jQuery Chosen通用初始化
程序员文章站
2023-12-12 13:37:28
一直在用chosen这个js插件,其目的就是美化下拉框。github地址:
no_results_text:"xxxxx"无搜索结果时显示的文本
allow_singl...
一直在用chosen这个js插件,其目的就是美化下拉框。github地址:
no_results_text:"xxxxx"无搜索结果时显示的文本
allow_single_deselect:true 是否允许取消选择
disable_search: true 是否有搜索框出现
max_selected_options:当select为多选时,最多选择个数
/* 功能: chosen通用初始化 * 创建人:brian 创建时间:2016-12-13 */ (function ($j) { var chosentool = function (el, options) { this.opts = options; this.choseninit(); this.chose_get_init(); this.chose_mult_set_init(this.opts.hidclassname); this.clickevent(); return this; } chosentool.opts = { selectid: '',//selectid hidclassname: '',//隐藏域class placeholdertxt: '',//select中placeholder文字 noresulttxt: '',//输入的名称未查到时显示的文字 datajson: ''//数据源 }; $j.fn.mychosentool = function (opt) { var value, args = array.prototype.slice.call(arguments, 1); var $jthis = $j(this), data = $jthis.data('chosentool'), options = $j.extend({}, chosentool.opts, $jthis.data(), typeof option === 'object' && option); if (typeof option === 'string') { //判断用户调用的方法是否存在 //if ($j.inarray(option, allowedmethods) < 0) { // throw new error("unknown method: " + option); //} if (!data) { return; } value = data[option].apply(data, args); if (option === 'destroy') { $jthis.removedata('chosentool'); } } /*插件外部调用插件内部的方法需要修改成下面形式*/ //if (typeof opt === '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 = new chosentool(this, opt))); } console.log(data); return typeof value === '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 () { var proopts = ""; this.opts.datajson = $j.parsejson(this.opts.datajson); $j.each(this.opts.datajson, function (index, item) { proopts += "<option value='" + item.valuefield + "'>" + item.textfield + "</option>"; }); $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 && typeof this.options === "object") ? true : false; }; //数据同步 chosentool.prototype.chose_get_init = function () { var selectid = this.opts.selectid; $j("#" + this.opts.selectid).chosen().change( function () { $j("#" + selectid).trigger("liszt:updated");//更新下拉框 }); }; //单选select value获取 chosentool.prototype.chose_get_value = function () { var selectval = $j("#" + this.opts.selectid).val(); $j("." + this.opts.hidclassname).val(selectval); }; //单选select value获取 chosentool.prototype.chose_mult_set_init = function () { var values = $j("." + this.opts.hidclassname).val(); if (values && values.indexof(',') > 0) { var arr = values.split(','); var length = arr.length; var value = ''; for (i = 0; i < length; i++) { value = arr[i]; $j("#" + this.opts.selectid + " [value='" + value + "']").attr('selected', 'selected'); } } else { $j("#" + this.opts.selectid + " [value='" + values + "']").attr('selected', 'selected'); } $j("#" + this.opts.selectid).trigger("liszt:updated"); }; //select text获取,多选时请注意 chosentool.prototype.chose_get_text = function () { return $j("#" + this.opts.selectid + " option:selected").text(); }; })(jquery);
以上所述是小编给大家介绍的jquery chosen通用初始化,希望对大家有所帮助
推荐阅读
-
jQuery中Chosen三级联动功能实例代码
-
jQuery Chosen通用初始化
-
jQuery中Chosen三级联动功能实例代码
-
Chosen 基于jquery的选择框插件使用方法
-
jQuery Validate 无法验证 chosen-select元素的解决方法
-
基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术-Angel工作室通用权限管理
-
jquery实现checkbox 全选/全不选的通用写法
-
jquery跟js初始化加载的多种方法及区别介绍
-
js、 jquery 页面加载初始化方法及区别
-
pyecharts图形初始化与通用配置项 新版详解!