dropdownlist封装（select2）

; (function () {
    return $.fn.extend({
        dropdownlist: function (obj) {
            var _default = {multiple:false,width:120};//默认属性
            obj = $.extend({}, _default, obj, true);//合并配置
            var configuration = {};

            var element = this;//缓存当前调用元素，js对象
            var $element = $(this);//缓存当前调用元素，jquery对象
  　　　　　　//需要在控件渲染完毕后，在$element.select2({...})设置的配置选项
            function getConfig() {
                var isExit = false;
                if (obj.placeholder) {
                    configuration.placeholder = obj.placeholder;
                    isExit = true;
                }
                if (typeof obj.allowClear!="undefined") {
                    configuration.allowClear = obj.allowClear;
                    isExit = true;
                }
                if (obj.dataSource) {
                    configuration.data = obj.dataSource;
                    isExit = true;
                }
                if (isExit) {
                    return configuration;
                }
            }
　　　　　　　//对外事件接口，callback为回调函数
            function selectEvent(callback) {
                if (obj.multiple) {//多选时，返回所有选中的值
                    $element.select2().on("select2:select", function (e) {
　　　　　　　　　　　　　　//重新组织返回数组对象
                        var selectedItem=$.map($element.select2("data"),function(o){
                            return {id:o.id,text:o.text};
                        })
                        callback(selectedItem);
                    });
                } else {//单选
                    $element.select2().on("select2:select", function (e) {
                        callback({ value: $element.select2().val(), text: $element.select2("data")[0].text });
                    });
                }
            }
　　　　　　　//方法入口
            (function initSelect() {
                $element.css({ width: obj.width + "px" });//设置宽度
                getConfig();//调用渲染控件后，需要重新配置的信息
                if (obj.multiple) {//判断是多选
                    if (configuration) {
                        $element.addClass("js-example-basic-multiple").attr("multiple", "multiple").select2(configuration);
                    } else {
                        $element.addClass("js-example-basic-multiple").attr("multiple", "multiple").select2();
                    }
                } else {
                    if (configuration) {
                        $element.addClass("js-example-basic-single").select2(configuration);
                    } else {
                        $element.addClass("js-example-basic-single").select2();
                    }
                    
                }
　　　　　　　　　//判断是否存在select事件
                if (obj.select && typeof obj.select == "function") {
                    selectEvent(obj.select);
                }
            })()
            return {//为封装控件提供方法（控件已经渲染完毕）
                setData: function (data) {//设置数据源
                    var d = data.data;
                    var _dic = [];
                    if (data.key && data.value) {//如果用户提供键值对
                        _dic.push(data.key);
                        _dic.push(data.value);
                    } else {//如果用户没有提供键值对
                        if (d && d.length > 0) {
                            for (var k in d[0]) {//获取键
                                _dic.push(k);
                            }
                        }
                    }
                    
                    
                    var _d = $.map(d, function (o) {
                        o.id = o.id || o[_dic[0]];//如果用户提供数据源键为id，则直接使用，否则重新组织数据
                        o.text = o.text || o[_dic[1]];
                        return o;
                    });
                    $element.select2({ data: _d });//加载数据源
                },
                setValue: function (v) {//设置默认值
                    $element.select2().val(v).trigger("change");
                },
                getValue: function () {//获取选中值
                    if (obj.multiple) {//如果多选控件，返回数组
                        var _r = [];
                        $.each($element.select2("data"), function (i,v) {
                            _r.push(v.id);
                        });
                        return _r;
                    } else {//单选，返回单个选中值
                        return $element.select2().val();
                    }
                },
                getText: function () {//获取选中文本
                    if (obj.multiple) {//多选控件，返回选中文本数组
                        var _r = [];
                        $.each($element.select2("data"), function (i, v) {
                            _r.push(v.text);
                        });
                        return _r;
                    } else {//单选控件，返回单个文本
                        return $element.select2("data")[0].text;
                    }
                },
                getItem: function () {//获取选中对象
                    if (obj.multiple) {//多选控件，返回选中对象数组
                        var _r = [];
                        $.each($element.select2("data"), function (i, v) {
                            _r.push({id:v.id,text:v.text});
                        });
                        return _r;
                    } else {//单选控件，返回选中对象
                        return { id: $element.select2("data")[0].id, text: $element.select2("data")[0].text };
                    }
                },
                on: function (event,callback) {//绑定事件，event名称，callback回调函数
                    switch (event) {
                        case "select"://绑定select事件
                            selectEvent(callback);
                            break;
                    }
                }
            };
        }
    })
})(jQuery)

 

<div>
    <select id="selTest1">
        <option value="1">测试1</option>
        <option value="2">测试2</option>
        <option value="3">测试3</option>
    </select>
    <select id="selTest2">
        <option value="1">测试1</option>
        <option value="2">测试2</option>
        <option value="3">测试3</option>
    </select>
    <select id="selTest3">
        <option value="1">测试1</option>
        <option value="2">测试2</option>
        <option value="3">测试3</option>
    </select>
    <select id="selPrincipal"></select>
</div>

 

var dropdown = $("#selTest1").dropdownlist({
            dataSource: [
                        { id: "bj", text: "北京" },
                        { id: "xm", text: "厦门" },
                        { id: "fz", text: "福州" }
            ]
        });
        var enteID = '201412221901050725';
        $.get("/Home/GetPrincipalData/?t=" + (new Date()).getTime(), { enteID: enteID }, function (d) {
            var data = $.parseJSON(d);
            $("#myTable").setGridSource({ name: "iPrincipal", source: data });
            selPrincipal.setData({data:data});

        });
        var selPrincipal = $("#selPrincipal").dropdownlist({width:200});
        
        dropdown.setValue("2");
        alert(dropdown.getText());
        alert(dropdown.getValue());
        dropdown.on("select", function (d) {
            alert(d.value);
        })
        var selTest2 = $("#selTest2").dropdownlist({
            multiple: true
        });
        selTest2.on("select", function (d) {
            alert(d[0].text);
            alert(selTest2.getText().join(','));
        });
        alert("selTest2:" + selTest2.getValue().join(','));
        $("#selTest3").dropdownlist({
            placeholder: "请选择",
            allowClear: true,
            select: function (d) {
                alert(d.text);
            }
        });