封装JS，并回传事件。

借鉴地址

　　JS：

    // 下拉框select，和ysComboxBoxTree对应
    $.fn.ysComboBox = function (option, param) {
        if (typeof option == 'string') {
            return $.fn.ysComboBox.methods[option](this, param);
        }
        var target = $(this);
        var targetId = target.attr('id');
        if (!targetId) {
            return false;
        }
        var _option = $.extend({
            url: null,
            key: "Key",
            value: "Value",
            maxHeight: "160px",
            class: null,
            multiple: false,
            data: null, // 数据源          
            dataName: 'Data',  // 数据名称
            onChange: null,
            default: undefined
        }, option);

        var dom = {
            loadData: function () {
                if (_option.url) {
                    $.ajax({
                        url: _option.url,
                        type: 'get',
                        dataType: 'json',
                        async: false,
                        cache: false,
                        success: function (data) {
                            _option.data = data;
                            if (data.Tag == 0) {
                                option.Err.call(target, data.Message);
                            }
                        },
                        error: function (xhr, status, obj) {
                            throw exception;
                        }
                    });
                    if (_option.dataName) {
                        if (_option.data != null) {
                            _option.data = _option.data[_option.dataName];
                        }
                    }
                }
            },
            render: function (setting) {
                if (setting.data && setting.data.length >= 0) {
                    var id = targetId + "_select";

                    var mutiple = '';
                    if (setting.multiple) {
                        mutiple = 'multiple=""';
                    }
                    var html = "<select id='" + id + "' name='" + id + "' class='" + ys.toString(setting.class) + " select2' " + mutiple + " maxheight=" + setting.maxHeight + ">";
                    var selectExist = $("#" + id).length > 0;
                    if (selectExist) {
                        $("#" + id).empty();
                    }

                    var option = '';

                    var groupOption = false; // 是否有分组
                    if (setting.data.length > 0) {
                        groupOption = setting.data[0][setting.value] instanceof Array;
                    }

                    if (!groupOption) {
                        if (!setting.class) {
                            // 没有form-control这个class，就加一个全部选项，应该是查询条件
                            option += "<option value='-1'>全部</option>";
                        } else {
                            if (!setting.multiple) {
                                option += "<option value='' selected='selected'>请选择</option>";
                            }
                        }
                    }

                    $.each(setting.data, function (i) {
                        var row = setting.data[i];
                        if (typeof row == 'string') {
                            option += "<option value='" + row + "'>" + row + "</option>";
                        } else {
                            if (row[setting.value] instanceof Array) {
                                // 分组的选项
                                option += "<optgroup label='--" + row[setting.key] + "--'>";
                                $.each(row[setting.value], function (j) {
                                    var childRow = row[setting.value][j];
                                    option += "<option value='" + childRow[setting.key] + "'>" + childRow[setting.value] + "</option>";

                                    if (row.IsDefault == 1) {
                                        setting.default = row[setting.key];
                                    }
                                });
                            }
                            else {
                                option += "<option value='" + row[setting.key] + "'>" + row[setting.value] + "</option>";

                                if (row.IsDefault == 1) {
                                    setting.default = row[setting.key];
                                }
                            }
                        }
                    });
                    if (selectExist) {
                        $("#" + id).append(option);
                    }
                    else {
                        html += option;
                        html += "</select>";
                        target.append(html);

                        if (setting.onChange) {
                            $("#" + id).change(setting.onChange);
                        }
                    }
                    $("#" + id).select2();

                    // hack 搜索的select保持和其他元素的宽度一致
                    $("#" + targetId).find(".select2-container").width(110);

                    if (setting.default != undefined) {
                        target.ysComboBox("setValue", setting.default);
                    }
                }
            }
        };
        dom.loadData();
        dom.render(_option);
        return target;
    };
    $.fn.ysComboBox.methods = {
        getValue: function (target) {
            var valArray = $("#" + $(target).attr("id") + "_select").select2("val");
            if (valArray == null) {
                return "";
            }
            else {
                var val = valArray.toString();
                // -1代表查询条件所有，就把这个查询条件置为空
                return val;
            }
        },
        setValue: function (target, value) {
            if (ys.isNullOrEmpty(value)) {
                return;
            }
            if (typeof value != 'string') {
                value = value.toString();
            }
            $("#" + $(target).attr("id") + "_select").val(value.split(',')).trigger("change");
        }
    };

　　前台调用 ：
　　

  if (id == 0) {
                $("#jigou").ysComboBox({
                url: '@Url.Content("~/SystemManage/TownHealthSupervision/GettownHealthSupervisionSelectListJson")' + "?SysAreaId=" + areaid,
                key: "Key",
                value: "Value",
                class: "form-control",
                Err: function (data) {
                    if (data) {
                        ys.alertError(data);
                    }
            　　}
            });
        }

 

    // 下拉框select，和ysComboxBoxTree对应    $.fn.ysComboBox = function (option, param) {        if (typeof option == 'string') {            return $.fn.ysComboBox.methods[option](this, param);        }        var target = $(this);        var targetId = target.attr('id');        if (!targetId) {            return false;        }        var _option = $.extend({            url: null,            key: "Key",            value: "Value",            maxHeight: "160px",            class: null,            multiple: false,            data: null, // 数据源                      dataName: 'Data',  // 数据名称            onChange: null,            default: undefined        }, option);
        var dom = {            loadData: function () {                if (_option.url) {                    $.ajax({                        url: _option.url,                        type: 'get',                        dataType: 'json',                        async: false,                        cache: false,                        success: function (data) {                            _option.data = data;                            if (data.Tag == 0) {                                option.Err.call(target, data.Message);                            }                        },                        error: function (xhr, status, obj) {                            throw exception;                        }                    });                    if (_option.dataName) {                        if (_option.data != null) {                            _option.data = _option.data[_option.dataName];                        }                    }                }            },            render: function (setting) {                if (setting.data && setting.data.length >= 0) {                    var id = targetId + "_select";
                    var mutiple = '';                    if (setting.multiple) {                        mutiple = 'multiple=""';                    }                    var html = "<select id='" + id + "' name='" + id + "' class='" + ys.toString(setting.class) + " select2' " + mutiple + " maxheight=" + setting.maxHeight + ">";                    var selectExist = $("#" + id).length > 0;                    if (selectExist) {                        $("#" + id).empty();                    }
                    var option = '';
                    var groupOption = false; // 是否有分组                    if (setting.data.length > 0) {                        groupOption = setting.data[0][setting.value] instanceof Array;                    }
                    if (!groupOption) {                        if (!setting.class) {                            // 没有form-control这个class，就加一个全部选项，应该是查询条件                            option += "<option value='-1'>全部</option>";                        } else {                            if (!setting.multiple) {                                option += "<option value='' selected='selected'>请选择</option>";                            }                        }                    }
                    $.each(setting.data, function (i) {                        var row = setting.data[i];                        if (typeof row == 'string') {                            option += "<option value='" + row + "'>" + row + "</option>";                        } else {                            if (row[setting.value] instanceof Array) {                                // 分组的选项                                option += "<optgroup label='--" + row[setting.key] + "--'>";                                $.each(row[setting.value], function (j) {                                    var childRow = row[setting.value][j];                                    option += "<option value='" + childRow[setting.key] + "'>" + childRow[setting.value] + "</option>";
                                    if (row.IsDefault == 1) {                                        setting.default = row[setting.key];                                    }                                });                            }                            else {                                option += "<option value='" + row[setting.key] + "'>" + row[setting.value] + "</option>";
                                if (row.IsDefault == 1) {                                    setting.default = row[setting.key];                                }                            }                        }                    });                    if (selectExist) {                        $("#" + id).append(option);                    }                    else {                        html += option;                        html += "</select>";                        target.append(html);
                        if (setting.onChange) {                            $("#" + id).change(setting.onChange);                        }                    }                    $("#" + id).select2();
                    // hack 搜索的select保持和其他元素的宽度一致                    $("#" + targetId).find(".select2-container").width(110);
                    if (setting.default != undefined) {                        target.ysComboBox("setValue", setting.default);                    }                }            }        };        dom.loadData();        dom.render(_option);        return target;    };    $.fn.ysComboBox.methods = {        getValue: function (target) {            var valArray = $("#" + $(target).attr("id") + "_select").select2("val");            if (valArray == null) {                return "";            }            else {                var val = valArray.toString();                // -1代表查询条件所有，就把这个查询条件置为空                return val;            }        },        setValue: function (target, value) {            if (ys.isNullOrEmpty(value)) {                return;            }            if (typeof value != 'string') {                value = value.toString();            }            $("#" + $(target).attr("id") + "_select").val(value.split(',')).trigger("change");        }    };