码迷,mamicode.com
首页 > Web开发 > 详细

中国省市 Json 二级联动

时间:2015-06-17 15:16:56      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

Json数据:

var cities =  {北京: [北京], 广东: [广州, 深圳, 珠海, 汕头, 韶关, 佛山, 江门, 湛江, 茂名, 肇庆, 惠州, 梅州, 汕尾, 河源, 阳江, 清远, 东莞, 中山, 潮州, 揭阳, 云浮], 上海: [黄浦区, 卢湾区, 徐汇区, 长宁区, 静安区, 普陀区, 闸北区, 虹口区, 杨浦区, 宝山区, 闵行区, 嘉定区, 松江区, 金山区, 青浦区, 南汇区, 奉贤区, 浦东新区, 崇明县], 天津: [和平区, 河东区, 河西区, 南开区, 河北区, 红桥区, 塘沽区, 汉沽区, 大港区, 东丽区, 西青区, 北辰区, 津南区, 武清区, 宝坻区, 静海县, 宁河县, 蓟县], 重庆: [渝中区, 大渡口区, 江北区, 南岸区, 北碚区, 渝北区, 巴南区, 长寿区, 双桥区, 沙坪坝区, 万盛区, 万州区, 涪陵区, 黔江区, 永川区, 合川区, 江津区, 九龙坡区, 南川区, 綦江县, 潼南县, 荣昌县, 璧山县, 大足县, 铜梁县, 梁平县, 开县, 忠县, 城口县, 垫江县, 武隆县, 丰都县, 奉节县, 云阳县, 巫溪县, 巫山县, 石柱土家族自治县, 秀山土家族苗族自治县, 酉阳土家族苗族自治县, 彭水苗族土家族自治县], 辽宁: [沈阳, 大连, 鞍山, 抚顺, 本溪, 丹东, 锦州, 营口, 阜新, 辽阳, 盘锦, 铁岭, 朝阳, 葫芦岛], 江苏: [南京, 苏州, 无锡, 常州, 镇江, 南通, 泰州, 扬州, 盐城, 连云港, 徐州, 淮安, 宿迁], 湖北: [武汉, 黄石, 十堰, 荆州, 宜昌, 襄樊, 鄂州, 荆门, 孝感, 黄冈, 咸宁, 随州, 恩施土家族苗族自治州, 仙桃, 天门, 潜江, 神农架林区], 四川: [成都, 自贡, 攀枝花, 泸州, 德阳, 绵阳, 广元, 遂宁, 内江, 乐山, 南充, 眉山, 宜宾, 广安, 达州, 雅安, 巴中, 资阳, 阿坝藏族羌族自治州, 甘孜藏族自治州, 凉山彝族自治州], 陕西: [西安, 铜川, 宝鸡, 咸阳, 渭南, 延安, 汉中, 榆林, 安康, 商洛], 河北: [石家庄, 唐山, 秦皇岛, 邯郸, 邢台, 保定, 张家口, 承德, 沧州, 廊坊, 衡水], 山西: [太原, 大同, 阳泉, 长治, 晋城, 朔州, 晋中, 运城, 忻州, 临汾, 吕梁], 河南: [郑州, 开封, 洛阳, 平顶山, 安阳, 鹤壁, 新乡, 焦作, 濮阳, 许昌, 漯河, 三门峡, 南阳, 商丘, 信阳, 周口, 驻马店, 焦作], 吉林: [长春, 吉林, 四平, 辽源, 通化, 白山, 松原, 白城, 延边朝鲜族自治州], 黑龙江: [哈尔滨, 齐齐哈尔, 鹤岗, 双鸭山, 鸡西, 大庆, 伊春, 牡丹江, 佳木斯, 七台河, 黑河, 绥化, 大兴安岭地区], 内蒙古: [呼和浩特, 包头, 乌海, 赤峰, 通辽, 鄂尔多斯, 呼伦贝尔, 巴彦淖尔, 乌兰察布, 锡林郭勒盟, 兴安盟, 阿拉善盟], 山东: [济南, 青岛, 淄博, 枣庄, 东营, 烟台, 潍坊, 济宁, 泰安, 威海, 日照, 莱芜, 临沂, 德州, 聊城, 滨州, 菏泽], 安徽: [合肥, 芜湖, 蚌埠, 淮南, 马鞍山, 淮北, 铜陵, 安庆, 黄山, 滁州, 阜阳, 宿州, 巢湖, 六安, 亳州, 池州, 宣城], 浙江: [杭州, 宁波, 温州, 嘉兴, 湖州, 绍兴, 金华, 衢州, 舟山, 台州, 丽水], 福建: [福州, 厦门, 莆田, 三明, 泉州, 漳州, 南平, 龙岩, 宁德], 湖南: [长沙, 株洲, 湘潭, 衡阳, 邵阳, 岳阳, 常德, 张家界, 益阳, 郴州, 永州, 怀化, 娄底, 湘西土家族苗族自治州], 广西: [南宁, 柳州, 桂林, 梧州, 北海, 防城港, 钦州, 贵港, 玉林, 百色, 贺州, 河池, 来宾, 崇左], 江西: [南昌, 景德镇, 萍乡, 九江, 新余, 鹰潭, 赣州, 吉安, 宜春, 抚州, 上饶], 贵州: [贵阳, 六盘水, 遵义, 安顺, 铜仁地区, 毕节地区, 黔西南布依族苗族自治州, 黔东南苗族侗族自治州, 黔南布依族苗族自治州], 云南: [昆明, 曲靖, 玉溪, 保山, 昭通, 丽江, 普洱, 临沧, 德宏傣族景颇族自治州, 怒江傈僳族自治州, 迪庆藏族自治州, 大理白族自治州, 楚雄彝族自治州, 红河哈尼族彝族自治州, 文山壮族苗族自治州, 西双版纳傣族自治州], 西藏: [拉萨, 那曲地区, 昌都地区, 林芝地区, 山南地区, 日喀则地区, 阿里地区], 海南: [海口, 三亚, 五指山, 琼海, 儋州, 文昌, 万宁, 东方, 澄迈县, 定安县, 屯昌县, 临高县, 白沙黎族自治县, 昌江黎族自治县, 乐东黎族自治县, 陵水黎族自治县, 保亭黎族苗族自治县, 琼中黎族苗族自治县], 甘肃: [兰州, 嘉峪关, 金昌, 白银, 天水, 武威, 酒泉, 张掖, 庆阳, 平凉, 定西, 陇南, 临夏回族自治州, 甘南藏族自治州], 宁夏: [银川, 石嘴山, 吴忠, 固原, 中卫], 青海: [西宁, 海东地区, 海北藏族自治州, 海南藏族自治州, 黄南藏族自治州, 果洛藏族自治州, 玉树藏族自治州, 海西蒙古族藏族自治州], 新疆: [乌鲁木齐, 克拉玛依, 吐鲁番地区, 哈密地区, 和田地区, 阿克苏地区, 喀什地区, 克孜勒苏柯尔克孜自治州, 巴音郭楞蒙古自治州, 昌吉回族自治州, 博尔塔拉蒙古自治州, 石河子, 阿拉尔, 图木舒克, 五家渠, 伊犁哈萨克自治州], 香港: [中西区, 湾仔区, 东区, 南区, 深水埗区, 油尖旺区, 九龙城区, 黄大仙区, 观塘区, 北区, 大埔区, 沙田区, 西贡区, 元朗区, 屯门区, 荃湾区, 葵青区, 离岛区], 澳门: [花地玛堂区, 圣安多尼堂区, 大堂区, 望德堂区, 风顺堂区, 嘉模堂区, 圣方济各堂区, 路凼], 台湾: [台北市, 高雄市, 台北县, 桃园县, 新竹县, 苗栗县, 台中县, 彰化县, 南投县, 云林县, 嘉义县, 台南县, 高雄县, 屏东县, 宜兰县, 花莲县, 台东县, 澎湖县, 基隆市, 新竹市, 台中市, 嘉义市, 台南市] }

 

cshtml:     

<select style="width: auto"></select>
<select name="City" style="width: auto"></select>

 

Jquery:

        //根据城市获取省份
        function getState(city) {
            for (var i in cities) {
                var c = cities[i];
                for (var j in c) {
                    if (c[j] == city) {
                        return i;
                    }
                }
            }
        }
        //设置省份和城市下拉框的值
        function setStateAndCity(city2) {
            if (city2) {
                if (city2 == "北京" || city2 == "天津" || city2 == "上海" || city2 == "重庆") {
                    state.val(city2);
                    state.change();
                }
                else {
                    state.val(getState(city2));
                    state.change();
                    city.val(city2);
                }
            } else {
                state.change();
            }
        }

       var city = $(‘select[name="City"]‘), state = city.prev(); 
        //加载省份下拉框选项
        for (var i in cities) {
            state.append(‘<option>‘ + i + ‘</option>‘);
        }
       //根据省份下拉框值,加载相应的城市下拉框选项,并定位地图中心点
        state.change(function () {
            var s = cities[this.value];
            city.html(‘‘);
            for (var i in s) {
                city.append(‘<option>‘ + s[i] + ‘</option>‘);
            }
        });

        state.change();

 

中国省市 Json 二级联动

标签:

原文地址:http://www.cnblogs.com/sxhNicole/p/4583163.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!