city_picker 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 92a6471dbed552f1c5ca28b52c64f6f71d6ba2402b3096d14c6e9cac6e271c54
+  data.tar.gz: 7fff61be12750734c0a45f163fdaab5fb6bb28371004ebd8cfe5c2001f2c8365
+SHA512:
+  metadata.gz: 135742e929bebc1d7ce33cd9b6077fd1c09f517465cba2be28f14178be29ac8dbaf2d06f20ba609484f3f8373f1686c11defff225c46004a4106c74be1c59ddb
+  data.tar.gz: 0ade2393813a15cb0308d7bf2ccc94adad55e3f5173783215fbb07f2357b9f3664225814f98a6c1b1f7594d0c3112b136980af5ce0bb09c0e03477c15aecec0a

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2018 doabit
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,74 @@
+# CityPicker
+中国省市区街道四级联地址选择，js代码来自 [city-picker](https://github.com/huangchanghuan/city-picker), 数据来自 [Administrative-divisions-of-China](https://github.com/modood/Administrative-divisions-of-China)
+
+## 安装
+
+### Gemfile
+
+```ruby
+gem 'city_picker'
+```
+
+### app/assets/javascripts/application.js
+
+```javascript
+//= require city_picker/city_picker
+```
+
+### app/assets/stylesheets/application.css
+
+```javascript
+*= require city_picker/city_picker
+```
+
+config/routes.rb
+```ruby
+mount CityPicker::Engine => "/city_picker"
+```
+
+## 使用
+
+在页面中加入
+
+```html
+<div style="position: relative;">
+  <!-- container -->
+  <input readonly type="text"  placeholder="请选择省/市"  id="target" style="width:100%">
+</div>
+```
+
+```javascript
+<script>
+  $(function() {
+    $('#target').citypicker({
+      responsive: true,
+      simple: true,
+      // level: 'district'
+      // addrElm: '#addrValue1'
+    });
+
+    $('#target').on('cp:updated', function(e) {
+      console.log($(this).val())
+    })
+  })
+</script>
+```
+
+ 如果要在选择后取得城市code，可在页面添加
+
+ ```html
+ <input type="text" id="addrValue">
+ ```
+
+ 或者 添加初始化选项 `addrElm: '#my_address_elm`
+
+ ```html
+  <input type="text" id="my_address_elm">
+ ```
+
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'CityPicker'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/city_picker_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/city_picker .js
+//= link_directory ../stylesheets/city_picker .css

data/app/assets/javascripts/city_picker/city_picker.js

@@ -0,0 +1,693 @@
+/*!
+ * CityPicker v@VERSION
+ * https://github.com/tshi0912/citypicker
+ *
+ * Copyright (c) 2015-@YEAR Tao Shi
+ * Released under the MIT license
+ *
+ * Date: @DATE
+ */
+
+ChineseDistricts={
+    86: {
+        'A-G': [
+            { code: '34', address: '安徽省' },
+            { code: '11', address: '北京市' },
+            { code: '50', address: '重庆市' },
+            { code: '35', address: '福建省' },
+            { code: '62', address: '甘肃省' },
+            { code: '44', address: '广东省' },
+            { code: '45', address: '广西壮族自治区' },
+            { code: '52', address: '贵州省' }],
+        'H-K': [
+            { code: '46', address: '海南省' },
+            { code: '13', address: '河北省' },
+            { code: '23', address: '黑龙江省' },
+            { code: '41', address: '河南省' },
+            { code: '42', address: '湖北省' },
+            { code: '43', address: '湖南省' },
+            { code: '32', address: '江苏省' },
+            { code: '36', address: '江西省' },
+            { code: '22', address: '吉林省' }],
+        'L-S': [
+            { code: '21', address: '辽宁省' },
+            { code: '15', address: '内蒙古自治区' },
+            { code: '64', address: '宁夏回族自治区' },
+            { code: '63', address: '青海省' },
+            { code: '37', address: '山东省' },
+            { code: '31', address: '上海市' },
+            { code: '14', address: '山西省' },
+            { code: '61', address: '陕西省' },
+            { code: '51', address: '四川省' }],
+        'T-Z': [
+            { code: '12', address: '天津市' },
+            { code: '65', address: '新疆维吾尔自治区' },
+            { code: '54', address: '西藏自治区' },
+            { code: '53', address: '云南省' },
+            { code: '33', address: '浙江省' }]
+    },
+};
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as anonymous module.
+        define(['jquery', 'ChineseDistricts'], factory);
+    } else if (typeof exports === 'object') {
+        // Node / CommonJS
+        factory(require('jquery'), require('ChineseDistricts'));
+    } else {
+        // Browser globals.
+        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';
+    var COUNTY = 'county';
+
+    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.defineDems();
+
+            this.render();
+
+            this.bind();
+
+            this.active = true;
+        },
+        //界面显示处理
+        render: function () {
+            var p = this.getPosition(),
+                placeholder = this.$element.attr('placeholder') || this.options.placeholder,
+                textspan = '<span class="city-picker-span" style="' +
+                    this.getWidthStyle(p.width) + 'height:' +
+                    p.height + 'px;line-height:' + (p.height - 1) + 'px;">' +
+                    (placeholder ? '<span class="placeholder">' + placeholder + '</span>' : '') +
+                    '<span class="title"></span><div class="arrow"></div>' + '</span>',
+
+                dropdown = '<div class="city-picker-dropdown" style="left:0px;top:100%;' +
+                    this.getWidthStyle(p.width, true) + '">' +
+                    '<div class="city-select-wrap">' +
+                    '<div class="city-select-tab">' +
+                    '<a class="active" data-count="province">省份</a>' +
+                    (this.includeDem('city') ? '<a data-count="city">城市</a>' : '') +
+                    (this.includeDem('district') ? '<a data-count="district">区县</a>' : '') +
+                    (this.includeDem('county') ? '<a data-count="county">乡镇</a>' : '') +
+                    '</div>' +
+                    '<div class="city-select-content">' +
+                    '<div class="city-select province" data-count="province"></div>' +
+                    (this.includeDem('city') ? '<div class="city-select city" data-count="city"></div>' : '') +
+                    (this.includeDem('district') ? '<div class="city-select district" data-count="district"></div>' : '') +
+                    (this.includeDem('county') ? '<div class="city-select county" data-count="county"></div>' : '') +
+                    '</div></div>';
+
+            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');
+
+            // setup this.$province, this.$city and/or this.$district object
+            $.each(this.dems, $.proxy(function (i, type) {
+                this['$' + type] = $select.filter('.' + type + '');
+            }, this));
+
+            this.refresh();
+        },
+
+        refresh: function (force) {
+            // clean the data-item for each $select
+            var $select = this.$dropdown.find('.city-select');
+            $select.data('item', null);
+            // parse value from value of the target $element
+            var val = this.$element.val() || '';
+            val = val.split('/');
+            $.each(this.dems, $.proxy(function (i, type) {//遍历dems
+                if (val[i] && i < val.length) {
+                    this.options[type] = val[i];//把当前显示值赋值给options
+                } else if (force) {
+                    this.options[type] = '';
+                }
+                this.output(type);//输出下拉框显示数据
+            }, this));
+            this.tab(PROVINCE);
+            this.feedText();//界面显示选择的内容
+            this.feedVal();//input标签value赋值
+        },
+        //dems赋值
+        defineDems: function () {
+            var stop = false;
+            $.each([PROVINCE, CITY, DISTRICT,COUNTY], $.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 > 0.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 = $("<div />").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 () {
+                    if(this.output(CITY)){//判断下一个tab是否有数据,没有则关闭下拉
+                        $this.close();
+                        return;
+                    };
+                    this.output(CITY);
+                    this.output(DISTRICT);
+                    this.output(COUNTY);
+                    this.tab(CITY);
+                }, this)));
+            }
+            if (this.$city) {
+                this.$city.on(EVENT_CHANGE, (this._changeCity = $.proxy(function () {
+                    if(this.output(DISTRICT)){
+                        $this.close();
+                        return;
+                    };
+                    this.output(COUNTY);
+                    this.tab(DISTRICT);
+                }, this)));
+            }
+
+            if (this.$district) {
+                this.$district.on(EVENT_CHANGE, (this._changeDistrict = $.proxy(function () {
+                    if(this.output(COUNTY)){
+                        $this.close();
+                        return;
+                    };
+                    this.tab(COUNTY);
+                }, 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);
+            }
+
+            if (this.$district) {
+                this.$district.off(EVENT_CHANGE, this._changeDistrict);
+            }
+        },
+        //获取选择项信息
+        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') ? '' : '/') + '<span class="select-item" data-count="' +
+                            type + '" data-code="' + item.code + '">' + item.address + '</span>';
+                    }
+                });
+            return text;
+        },
+        getPlaceHolder: function () {
+            return this.$element.attr('placeholder') || this.options.placeholder;
+        },
+        //显示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='';
+            var that = this;
+            this.$dropdown.find('.city-select')
+                .each(function () {
+                    var item = $(this).data('item');
+                    if (item) {
+                        text += ($(this).hasClass('province') ? '' : '/') + item.address;
+                        code += ($(this).hasClass('province') ? '' : that.options.delimiter) + item.code;
+                    }
+                });
+            $(this.options.addrElm).val(code);
+            return text;
+        },
+        //input的value赋值
+        feedVal: function (trigger) {
+            this.$element.val(this.getVal());
+            if(trigger) {
+                this.$element.trigger('cp:updated');
+            }
+        },
+        //输出数据
+        output: function (type) {
+            var $this = this;
+            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') :
+                            type === COUNTY ? this.$district && this.$district.find('.active').data('code') : code
+            );
+            //districts = $.isNumeric(code) ? ChineseDistricts[code] : null;
+　　　　　　　//判断是否应该去远程加载数据
+            districts = $.isNumeric(code) ? this.remoteLoadData(type,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);//当前tab添加item(包含选择对象的内容)
+            if(! (type === PROVINCE)){//标识:下一个选项没有数据则关闭
+                if(data.length==0){
+                    return true;
+                }
+            }
+        },
+        //遍历省份
+        getProvinceList: function (data) {
+            var list = [],
+                $this = this,
+                simple = this.options.simple;
+
+            $.each(data, function (i, n) {
+                list.push('<dl class="clearfix">');
+                list.push('<dt>' + i + '</dt><dd>');
+                $.each(n, function (j, m) {
+                    list.push(
+                        '<a' +
+                        ' title="' + (m.address || '') + '"' +
+                        ' data-code="' + (m.code || '') + '"' +
+                        ' class="' +
+                        (m.selected ? ' active' : '') +
+                        '">' +
+                        ( simple ? $this.simplize(m.address, PROVINCE) : m.address) +
+                        '</a>');
+                });
+                list.push('</dd></dl>');
+            });
+
+            return list.join('');
+        },
+        //遍历市或区或县
+        getList: function (data, type) {
+            var list = [],
+                $this = this,
+                simple = this.options.simple;
+            list.push('<dl class="clearfix"><dd>');
+
+            $.each(data, function (i, n) {
+                list.push(
+                    '<a' +
+                    ' title="' + (n.address || '') + '"' +
+                    ' data-code="' + (n.code || '') + '"' +
+                    ' class="' +
+                    (n.selected ? ' active' : '') +
+                    '">' +
+                    ( simple ? $this.simplize(n.address, type) : n.address) +
+                    '</a>');
+            });
+            list.push('</dd></dl>');
+
+            return list.join('');
+        },
+        //简化名字
+        simplize: function (address, type) {
+            address = address || '';
+            if (type === PROVINCE) {
+                return address.replace(/[省,市,自治区,壮族,回族,维吾尔]/g, '');
+            } else {
+                return address;
+            }
+
+            // } else if (type === CITY) {
+            //     return address.replace(/[回族,蒙古,苗族,白族,傣族,景颇族,藏族,彝族,壮族,傈僳族,布依族,侗族]/g, '')
+            //         .replace('哈萨克', '').replace('自治州', '').replace(/自治县/, '');
+            // } else if (type === DISTRICT) {
+            //     return address.length > 2 ? address.replace(/[市,区,县,旗]/g, '') : address;
+            // } else if (type === COUNTY) {
+            //     return address;
+            // }
+        },
+        //处理tab显示
+        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();
+        },
+        //远程加载数据
+        remoteLoadData: function (cityType,cityId) {
+            var resultData = {};
+            if(PROVINCE===cityType)
+            {
+                return ChineseDistricts[cityId];
+            }
+            $.ajax({
+                // url: "/city-data/"+cityType+"/"+cityId,
+                url: '/city_picker?code=' + cityId + "&city_type=" + cityType + '&level=' + this.options.level,
+                type: "GET",
+                dataType: "json",
+                async: false,
+                contentType: "application/json",
+                success: function (result) {
+                    // console.log(result)
+                    if(result.code=="0")
+                    {
+                        resultData = result.data;
+                    }else
+                    {
+                        console.log(result.desc);
+                    }
+                }
+            });
+            return resultData;
+        }
+    };
+
+    CityPicker.DEFAULTS = {
+        simple: false,
+        responsive: false,
+        placeholder: '请选择省/市/区/镇',
+        level: 'county',
+        province: '',
+        city: '',
+        district: '',
+        county:'',
+        addrElm: '#addrValue',
+        delimiter: ','
+    };
+
+    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();
+    });
+});