中国城市数据表JS插件

浏览数：657 / 时间：2015年06月09日

网上得到一个中国城市的json，就有个想法做成我的中国城市选项表js插件。

使用方法：

在引用jQuery后，加入

就可以在

产生中国城市选择表，你可以为它自定义CSS

实际效果(涉及跨域加载速度较慢)：

插件源码：

function City() {
    this.url = "http://files.cnblogs.com/updateofsimon/cityname.js";
    this.area = null;
    this.html = ‘‘;
    this.city_json = ‘‘;
}

City.prototype = {
    init : function() {
        $(‘#city_list‘).html(‘<select id="prov"></select><select style="display: none" id="city"></select><select style="display: none" id="area"></select>‘);
        var self = this;
        $.getJSON("http://query.yahooapis.com/v1/public/yql", {
            q : ‘select * from json where url=\"http://files.cnblogs.com/updateofsimon/cityname.js"‘,
            format : "json"
        }, function(data) {
            self.city_json = data.query.results.json;
            self._prov();
        });
        $(‘#prov‘).unbind(‘change‘).bind(‘change‘, function() {
            self._city();
        });
        $(‘#city‘).unbind(‘change‘).bind(‘change‘, function() {
            self._area();
        });
    },
    _prov : function() {
        var self = this;

        self.html = "<option value=‘‘>请选择-省-</option>";
        $(self.city_json.citylist).each(function(i, prov) {
            self.html += "<option value=‘" + prov.p + "‘>" + prov.p + "</option>";
        });
        $(‘#prov‘).html(self.html);
    },
    _city : function() {
        var self = this;
        var prov_id = $(‘#prov‘).get(0).selectedIndex - 1;

        if (prov_id < 1 || typeof (self.city_json.citylist[prov_id].c) == "undefined") {
            $(‘#city‘).empty().hide();
            $(‘#area‘).empty().hide();
            return;
        }
        $(‘#city‘).empty().show();
        self.html = "<option value=‘‘>请选择-市-</option>";
        $.each(self.city_json.citylist[prov_id].c, function(i, city) {
            self.html += "<option value=‘" + city.n + "‘>" + city.n + "</option>";
        });

        $(‘#city‘).html(self.html);
        self._area();
    },
    _area : function() {
        var self = this;
        var prov_id = $(‘#prov‘).get(0).selectedIndex - 1, city_id = $(‘#city‘).get(0).selectedIndex - 1;

        if (prov_id < 1 || city_id < 1 || typeof (self.city_json.citylist[prov_id].c[city_id].a) == "undefined") {
            $(‘#area‘).empty().hide();
            return;
        };
        $(‘#area‘).empty().show();
        self.html = "<option value=‘‘>请选择-区-</option>";
        $.each(self.city_json.citylist[prov_id].c[city_id].a, function(i, area) {
            self.html += "<option value=‘" + area.s + "‘>" + area.s + "</option>";
        });

        $(‘#area‘).html(self.html);
    }
};
$(function() {
    new City().init();
});