/*! * CityPicker v1.3.2 * https://github.com/tshi0912/citypicker * * Copyright (c) 2015-2019 Tao Shi * Released under the MIT license * * Date: 2019-10-19T17:21:49.592Z */ (function (factory) { if (typeof define === "function" && define.amd) { define(["jquery", "ChineseDistricts"], factory) } else if (typeof exports === "object") { factory(require("jquery"), require("ChineseDistricts")) } else { factory(jQuery, ChineseDistricts) } })(function ($, ChineseDistricts) { "use strict"; if (typeof ChineseDistricts === "undefined") { throw new Error('The file "city-picker.data.js" must be included first!') } var NAMESPACE = "citypicker"; var EVENT_CHANGE = "change." + NAMESPACE; var PROVINCE = "province"; var CITY = "city"; var DISTRICT = "district"; function CityPicker(element, options) { this.$element = $(element); this.$dropdown = null; this.options = $.extend({}, CityPicker.DEFAULTS, $.isPlainObject(options) && options); this.active = false; this.dems = []; this.needBlur = false; this.init() } CityPicker.prototype = { constructor: CityPicker, init: function () { this.codeRender(); this.defineDems(); this.render(); this.bind(); this.active = true }, codeRender: function () { var code = this.$element.attr("code"); var value = this.$element.val(); if (code !== undefined && code !== "" && !isNaN(Number(code))) this.$element.val($.fn.citypicker.getAddressbyCodeId(code)); if (value !== undefined && value !== "" && !isNaN(Number(value))) this.$element.val($.fn.citypicker.getAddressbyCodeId(value)) }, render: function () { var p = this.getPosition(), placeholder = this.$element.attr("placeholder") || this.options.placeholder, textspan = '' + (placeholder ? '' + placeholder + "" : "") + '
' + "
", dropdown = '
' + '
' + '
' + '省份' + (this.includeDem("city") ? '城市' : "") + (this.includeDem("district") ? '区县' : "") + "
" + '
' + '
' + (this.includeDem("city") ? '
' : "") + (this.includeDem("district") ? '
' : "") + "
"; this.$element.addClass("city-picker-input"); this.$textspan = $(textspan).insertAfter(this.$element); this.$dropdown = $(dropdown).insertAfter(this.$textspan); var $select = this.$dropdown.find(".city-select"); $.each(this.dems, $.proxy(function (i, type) { this["$" + type] = $select.filter("." + type + "") }, this)); this.refresh() }, refresh: function (force) { var $select = this.$dropdown.find(".city-select"); $select.data("item", null); var val = this.$element.val() || ""; val = val.split("/"); $.each(this.dems, $.proxy(function (i, type) { if (val[i] && i < val.length) { this.options[type] = val[i] } else if (force) { this.options[type] = "" } this.output(type) }, this)); this.tab(PROVINCE); this.feedText(); this.feedVal() }, defineDems: function () { var stop = false; $.each([PROVINCE, CITY, DISTRICT], $.proxy(function (i, type) { if (!stop) { this.dems.push(type) } if (type === this.options.level) { stop = true } }, this)) }, includeDem: function (type) { return $.inArray(type, this.dems) !== -1 }, getPosition: function () { var p, h, w, s, pw; p = this.$element.position(); s = this.getSize(this.$element); h = s.height; w = s.width; if (this.options.responsive) { pw = this.$element.offsetParent().width(); if (pw) { w = w / pw; if (w > .99) { w = 1 } w = w * 100 + "%" } } return {top: p.top || 0, left: p.left || 0, height: h, width: w} }, getSize: function ($dom) { var $wrap, $clone, sizes; if (!$dom.is(":visible")) { $wrap = $("
").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(true); 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() } }, getCode: function (count) { var obj = {}, arr = []; this.$textspan.find(".select-item").each(function () { var code = $(this).data("code"); var count = $(this).data("count"); obj[count] = code; arr.push(code) }); return count ? obj[count] : arr.join("/") }, getVal: function () { var text = ""; var code = ""; this.$dropdown.find(".city-select").each(function () { var item = $(this).data("item"); if (item) { code = item.code; text += ($(this).hasClass("province") ? "" : "/") + item.address } }); return this.options.render == "code" ? code : text }, feedVal: function (trigger) { this.$element.val(this.getVal()); if (trigger) { this.$element.trigger("cp:updated") } }, output: function (type) { var options = this.options; 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; 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: true, render: "text", placeholder: "请选择省/市/区", level: "district", province: "", city: "", district: "" }; CityPicker.setDefaults = function (options) { $.extend(CityPicker.DEFAULTS, options) }; CityPicker.other = $.fn.citypicker; $.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; $.fn.citypicker.noConflict = function () { $.fn.citypicker = CityPicker.other; return this }; $.fn.citypicker.getAddressbyCodeId = function (code_id) { var city = ChineseDistricts; var code = city["" + code_id]; var addr = ""; var province = ""; var province_code = ""; var city_str = ""; var county = ""; if (code_id.substring(0, 2) === "44") { province = "广东省"; province_code = "440000" } else { $.each(city["86"], function (i, item) { $.each(item, function (j, index) { if (index["code"] === code_id.substring(0, 2) + "0000") { province = index["address"]; province_code = index["code"]; return false } }) }) } if (code_id.substring(2, 4).indexOf("00") == -1) { if (code_id.length > 6) { var city_code = code_id.substring(0, 6); if (typeof city[province_code][city_code] !== "undefined") { city_str = city[province_code][city_code] } } if (!city_str) { var city_code = code_id.substring(0, 4) + "00"; if (typeof city[province_code][city_code] === "undefined") { city_code = code_id.substring(0, 3) + "100" } if (typeof city[province_code][city_code] !== "undefined") { city_str = city[province_code][city_code] } } } if (code === undefined) { addr = city[city_code][code_id]; return addr = province + "/" + city_str + "/" + addr } else { if (code_id.substring(2, 4).indexOf("00") != -1) { return addr = province } else { var city_city = city[code_id.substring(0, 2) + "0000"]; return addr = province + "/" + city_city[code_id] } } }; $(function () { $('[data-toggle="city-picker"]').citypicker() }) });