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) {
    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);