").appendTo($("body")); $wrap.css({ "position": "absolute !important", "visibility": "hidden !important", "display": "block !important" }); $clone = $dom.clone().appendTo($wrap); sizes = { width: $clone.outerWidth(), height: $clone.outerHeight() }; $wrap.remove(); } else { sizes = { width: $dom.outerWidth(), height: $dom.outerHeight() }; } return sizes; }, getWidthStyle: function (w, dropdown) { if (this.options.responsive && !$.isNumeric(w)) { return 'width:' + w + ';'; } else { return 'width:' + (dropdown ? Math.max(320, w) : w) + 'px;'; } }, bind: function () { var $this = this; $(document).on('click', (this._mouteclick = function (e) { var $target = $(e.target); var $dropdown, $span, $input; if ($target.is('.city-picker-span')) { $span = $target; } else if ($target.is('.city-picker-span *')) { $span = $target.parents('.city-picker-span'); } if ($target.is('.city-picker-input')) { $input = $target; } if ($target.is('.city-picker-dropdown')) { $dropdown = $target; } else if ($target.is('.city-picker-dropdown *')) { $dropdown = $target.parents('.city-picker-dropdown'); } if ((!$input && !$span && !$dropdown) || ($span && $span.get(0) !== $this.$textspan.get(0)) || ($input && $input.get(0) !== $this.$element.get(0)) || ($dropdown && $dropdown.get(0) !== $this.$dropdown.get(0))) { $this.close(true); } })); this.$element.on('change', (this._changeElement = $.proxy(function () { this.close(true); this.refresh(true); }, this))).on('focus', (this._focusElement = $.proxy(function () { this.needBlur = true; this.open(); }, this))).on('blur', (this._blurElement = $.proxy(function () { if (this.needBlur) { this.needBlur = false; this.close(true); } }, this))); this.$textspan.on('click', function (e) { var $target = $(e.target), type; $this.needBlur = false; if ($target.is('.select-item')) { type = $target.data('count'); $this.open(type); } else { if ($this.$dropdown.is(':visible')) { $this.close(); } else { $this.open(); } } }).on('mousedown', function () { $this.needBlur = false; }); this.$dropdown.on('click', '.city-select a', function () { var $select = $(this).parents('.city-select'); var $active = $select.find('a.active'); var last = $select.next().length === 0; $active.removeClass('active'); $(this).addClass('active'); if ($active.data('code') !== $(this).data('code')) { $select.data('item', { address: $(this).attr('title'), code: $(this).data('code') }); $(this).trigger(EVENT_CHANGE); $this.feedText(); $this.feedVal(); if (last) { $this.close(); } } }).on('click', '.city-select-tab a', function () { if (!$(this).hasClass('active')) { var type = $(this).data('count'); $this.tab(type); } }).on('mousedown', function () { $this.needBlur = false; }); if (this.$province) { this.$province.on(EVENT_CHANGE, (this._changeProvince = $.proxy(function () { this.output(CITY); this.output(DISTRICT); this.tab(CITY); }, this))); } if (this.$city) { this.$city.on(EVENT_CHANGE, (this._changeCity = $.proxy(function () { this.output(DISTRICT); this.tab(DISTRICT); }, this))); } }, open: function (type) { type = type || PROVINCE; this.$dropdown.show(); this.$textspan.addClass('open').addClass('focus'); this.tab(type); }, close: function (blur) { this.$dropdown.hide(); this.$textspan.removeClass('open'); if (blur) { this.$textspan.removeClass('focus'); } }, unbind: function () { $(document).off('click', this._mouteclick); this.$element.off('change', this._changeElement); this.$element.off('focus', this._focusElement); this.$element.off('blur', this._blurElement); this.$textspan.off('click'); this.$textspan.off('mousedown'); this.$dropdown.off('click'); this.$dropdown.off('mousedown'); if (this.$province) { this.$province.off(EVENT_CHANGE, this._changeProvince); } if (this.$city) { this.$city.off(EVENT_CHANGE, this._changeCity); } }, getText: function () { var text = ''; this.$dropdown.find('.city-select') .each(function () { var item = $(this).data('item'), type = $(this).data('count'); if (item) { text += ($(this).hasClass('province') ? '' : '/') + '' + item.address + ''; } }); return text; }, getPlaceHolder: function () { return this.$element.attr('placeholder') || this.options.placeholder; }, feedText: function () { var text = this.getText(); if (text) { this.$textspan.find('>.placeholder').hide(); this.$textspan.find('>.title').html(this.getText()).show(); } else { this.$textspan.find('>.placeholder').text(this.getPlaceHolder()).show(); this.$textspan.find('>.title').html('').hide(); } }, getVal: function () { var text = ''; this.$dropdown.find('.city-select') .each(function () { var item = $(this).data('item'); if (item) { text += ($(this).hasClass('province') ? '' : '/') + item.address; } }); return text; }, feedVal: function () { this.$element.val(this.getVal()); }, output: function (type) { var options = this.options; //var placeholders = this.placeholders; var $select = this['$' + type]; var data = type === PROVINCE ? {} : []; var item; var districts; var code; var matched = null; var value; if (!$select || !$select.length) { return; } item = $select.data('item'); value = (item ? item.address : null) || options[type]; code = ( type === PROVINCE ? 86 : type === CITY ? this.$province && this.$province.find('.active').data('code') : type === DISTRICT ? this.$city && this.$city.find('.active').data('code') : code ); //districts = $.isNumeric(code) ? ChineseDistricts[code] : null; districts =ChineseDistricts[code]; if ($.isPlainObject(districts)) { $.each(districts, function (code, address) { var provs; if (type === PROVINCE) { provs = []; for (var i = 0; i < address.length; i++) { if (address[i].address === value) { matched = { code: address[i].code, address: address[i].address }; } provs.push({ code: address[i].code, address: address[i].address, selected: address[i].address === value }); } data[code] = provs; } else { if (address === value) { matched = { code: code, address: address }; } data.push({ code: code, address: address, selected: address === value }); } }); } $select.html(type === PROVINCE ? this.getProvinceList(data) : this.getList(data, type)); $select.data('item', matched); }, getProvinceList: function (data) { var list = [], $this = this, simple = this.options.simple; $.each(data, function (i, n) { list.push('

'); list.push('

' + i + '

'); $.each(n, function (j, m) { list.push( '' + ( simple ? $this.simplize(m.address, PROVINCE) : m.address) + ''); }); list.push('

'); }); return list.join(''); }, getList: function (data, type) { var list = [], $this = this, simple = this.options.simple; list.push('

'); $.each(data, function (i, n) { list.push( '' + ( simple ? $this.simplize(n.address, type) : n.address) + ''); }); list.push('

'); return list.join(''); }, simplize: function (address, type) { address = address || ''; if (type === PROVINCE) { return address.replace(/[省,市,自治区,壮族,回族,维吾尔]/g, ''); } else if (type === CITY) { return address.replace(/[市,地区,回族,蒙古,苗族,白族,傣族,景颇族,藏族,彝族,壮族,傈僳族,布依族,侗族]/g, '') .replace('哈萨克', '').replace('自治州', '').replace(/自治县/, ''); } else if (type === DISTRICT) { return address.length > 2 ? address.replace(/[市,区,县,旗]/g, '') : address; } }, tab: function (type) { var $selects = this.$dropdown.find('.city-select'); var $tabs = this.$dropdown.find('.city-select-tab > a'); var $select = this['$' + type]; var $tab = this.$dropdown.find('.city-select-tab > a[data-count="' + type + '"]'); if ($select) { $selects.hide(); $select.show(); $tabs.removeClass('active'); $tab.addClass('active'); } }, reset: function () { this.$element.val(null).trigger('change'); }, destroy: function () { this.unbind(); this.$element.removeData(NAMESPACE).removeClass('city-picker-input'); this.$textspan.remove(); this.$dropdown.remove(); } }; CityPicker.DEFAULTS = { simple: false, responsive: false, placeholder: '请选择省/市/区', level: 'district', province: '', city: '', district: '' }; CityPicker.setDefaults = function (options) { $.extend(CityPicker.DEFAULTS, options); }; // Save the other citypicker CityPicker.other = $.fn.citypicker; // Register as jQuery plugin $.fn.citypicker = function (option) { var args = [].slice.call(arguments, 1); return this.each(function () { var $this = $(this); var data = $this.data(NAMESPACE); var options; var fn; if (!data) { if (/destroy/.test(option)) { return; } options = $.extend({}, $this.data(), $.isPlainObject(option) && option); $this.data(NAMESPACE, (data = new CityPicker(this, options))); } if (typeof option === 'string' && $.isFunction(fn = data[option])) { fn.apply(data, args); } }); }; $.fn.citypicker.Constructor = CityPicker; $.fn.citypicker.setDefaults = CityPicker.setDefaults; // No conflict $.fn.citypicker.noConflict = function () { $.fn.citypicker = CityPicker.other; return this; }; $(function () { $('[data-toggle="city-picker"]').citypicker(); }); });