https://apgb.bank.in/public/js/select.js

1;(function (root, factory) {
2    //amd
3    if (typeof define === 'function' && define.amd) {
4        define(['$'], factory);
5    } else if (typeof exports === 'object') {
6        //umd
7        module.exports = factory();
8    } else {
9        root.Select = factory(window.Zepto || window.jQuery || $);
10    }
11})(this, function ($) {
12    //插件代码
13    $.fn.Select = function (settings) {
14        var arr = [];
15        $(this).each(function () {
16            var select = new Select(this, settings);
17            select.init();
18            arr.push(select);
19        });
20        return $(arr); ///这里return 为了支持链式调用,遍历所有调用插件的集合。
21
22    };
23
24    var Select = function (ele, settings) {
25        var rnd = Math.random().toString().replace('.', '');
26        this.id = 'sel_' + (+new Date()).toString().substr(-8) + rnd;
27        this.default = {
28            maxHeight: 200,
29            maxWidth: null,
30            disabled: false,
31            selected: null,
32            model: null
33        };
34        this.settings = $.extend({}, this.default, settings);
35        this.target = $(ele);
36        this.model = $.extend([], this.settings.model);//数据
37    };
38
39
40    Select.prototype = {
41        init: function () {
42            this.create();
43            this.bindEvent();
44            return this;
45        },
46        create: function () {
47            //生成自定义的select主框，添加类和i样式
48            // 获得的w和h都是依据原始select大小
49            var rect = this.target[0].getBoundingClientRect();
50            this.w = this.settings.width || rect.right - rect.left;
51            this.h = this.settings.height || rect.bottom - rect.top;
52            this.trigger = $('<div class="ui-select-trigger"><span></span><i></i></div>');
53            var clsname = this.target.attr('class');
54            this.trigger.addClass(clsname);
55            this.trigger.width(this.w);
56            this.trigger.height(this.h).css('lineHeight', this.h + 'px');
57            if (this.settings.disabled || this.target.hasClass('disabled') || this.target.attr('disabled') == 'disabled') {
58                this.trigger.addClass('ui-select-disabled');
59                this.disabled = true;
60            }
61            this.target.after(this.trigger);
62            var arrow = this.trigger.find('i');
63            arrow.css({
64                top: (this.trigger.outerHeight() - arrow.outerHeight() / 2) / 2
65            });
66
67            //生成下拉列表
68            this.select = $('<div id="' + this.id + '" class="ui-select"><ul class="ui-select-content"></ul></div>');
69            $('body').append(this.select);
70            this.selectContent = this.select.children('ul');
71            //生成下拉的每个选项
72            this.format();
73            this.target.hide();
74        },
75        setData: function (model) {
76            this.model = model;
77            this.format();
78        },
79        addData: function (val, txt, disabled) {
80            if(!val) {
81                alert("please enter a value");
82                return;
83            }
84            for (var index in this.model) {
85                if (this.model[index].value == val){
86                    alert('值重复'+val);
87                    return;
88                }
89            }
90            var o = {
91                value: val,
92                text: txt || val,
93                disabled: disabled||false
94            };
95            this.model.push(o);
96            alert('add successfully');
97            this.render();
98
99
100        },
101        render: function () {
102            this.format();
103        },
104        //格式化数据
105        format: function () {
106            var _this = this;
107            //如果是通过select的option值，将选项的值存入model中
108            if (!this.settings.model && this.model.length == 0) {
109                this.model = [];
110                this.target.find('option').each(function () {
111                    var o = {
112                        value: $(this).attr('value'),
113                        text: $(this).html(),
114                        disabled: $(this).attr('disabled')
115                    };
116                    _this.model.push(o);
117                });
118            } else {
119                // 通过model传入的数据，设置原始的select的option值。如果target元素不是select，则不赋值。
120                var _html = "";
121                for (var i = 0, l = _this.model.length; i < l; i++) {
122                    var item = _this.model[i];
123                    var dis = item.disabled ? ' disabled="true" ' : ''
124                    _html += '<option ' + dis + ' value="' + _this.escape(item.value) + '">' + _this.escape(item.text) + '</option>'
125                }
126                if (this.target.get(0).nodeName == "SELECT") {
127                    this.target.html(_html);
128                }
129            }
130
131            // 生成自定义的select选项
132            var str = '';
133            for (var i = 0, l = _this.model.length; i < l; i++) {
134                var item = _this.model[i];
135                var cls = '';
136                if (item.disabled) {
137                    cls += ' ui-select-item-disabled';
138                }
139                str += '<li class="' + cls + '" data-text="' + _this.escape(item.text) + '" data-value="' + _this.escape(item.value) + '" title="' + _this.escape(item.text) + '">' + item.text + '</li>';
140            }
141            _this.selectContent.html(str);
142            _this.selectContent.children('li').height(_this.h).css('lineHeight', _this.h + 'px');
143            // 获取select下拉框的默认值
144            var v = this.target.val();
145            if (typeof this.target[0].value == 'undefined') {
146                v = this.target.data('value');
147            }
148            _this.value = v;
149            this.setValue(v);
150        },
151        escape: function (v) {
152            return v.toString().replace(/\'/igm, "&apos;").replace(/\"/igm, "&quot;")
153        },
154        // 设置select值
155        setValue: function (val, txt) {
156            var _this = this;
157            this.selectContent.find('li').each(function () {
158                if ($(this).data('value') == val) {
159                    var txt = txt || $(this).data('text');
160                    _this.trigger.children('span').attr('title', txt).text(txt);
161                    _this.trigger.attr('data-value', val);
162                    _this.target.val(val);
163                    _this.target.attr('data-value', val);
164                    _this.target.attr('data-text', txt);
165
166                    $(this).addClass('ui-select-item-selected').siblings().removeClass('ui-select-item-selected');
167                    // 如果当前列表选项的value值等于设置的值，则不触发change事件。否则需

167要trigger改变事件，进行更新
168                    if (_this.value != val) {
169                        _this.settings.selected && _this.settings.selected.call(_this, val, txt);
170                        _this.target.trigger('change', val);
171                    }
172                    _this.value = val;
173                    return;
174                }
175            })
176        },
177        bindEvent: function () {
178            var _this = this;
179            _this.status = false;
180            //对SELECT主框绑定点击事件，显示下拉列表，再次点击则消失。
181            this.trigger.on('click', function () {
182                if (!_this.disabled) {
183                    $('.ui-select').not('#' + _this.id).trigger('hide');
184                    if (!_this.status) {
185                        _this.show();
186                    } else {
187                        _this.hide();
188                    }
189                }
190                return false;
191            });
192            // 监听自定义set事件
193            _this.target.on('set', function (e, v) {
194                _this.setValue(v)
195            });
196
197            //重置选中样式
198            this.select.find('li').each(function () {
199                $(this).removeClass('ui-select-item-selected');
200            });
201
202            //对下拉列表绑定点击事件，同时设置选中的值
203            this.select.on('click', 'li', function () {
204                if (!$(this).hasClass('ui-select-item-disabled')) {
205                    var val = $(this).data('value');
206                    var txt = $(this).data('text');
207                    _this.setValue(val, txt);
208                    _this.hide();
209                }
210                return false;
211            });
212            this.select.on('hide', function () {
213                _this.hide();
214            });
215            $(document).click(function () {
216                _this.hide();
217            })
218        },
219        show: function () {
220            this.trigger.addClass('active');
221            var _this = this;
222            var pos = _this.trigger[0].getBoundingClientRect();
223            //设置下拉框的位置
224            this.select.css({
225                left: pos.left,
226                top: _this.trigger.offset().top + pos.bottom - pos.top
227            }).css({
228                maxHeight: this.settings.maxHeight,
229                maxWidth: this.settings.maxWidth || pos.right - pos.left,
230                minWidth: this.w
231            }).show();
232            this.status = true;
233        },
234        hide: function () {
235            this.trigger.removeClass('active');
236            this.status = false;
237            this.select.hide();
238            this.target.trigger('blur');
239        }
240    }
241    return Select;
242});