博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 实现省市二级联动,附带完整的省市json数据 (粘贴即用)
阅读量:6980 次
发布时间:2019-06-27

本文共 6416 字,大约阅读时间需要 21 分钟。

1、可以单独定义一个js,保存省市json数据。

citydata = {    "安徽": [        "合肥",        "芜湖",        "蚌埠",        "淮南",        "马鞍山",        "淮北",        "铜陵",        "安庆",        "黄山",        "阜阳",        "宿州",        "滁州",        "六安",        "宣城",        "池州",        "亳州",        "其他"    ],    "北京": [        "北京"    ],    "重庆": [        "重庆"    ],    "福建": [        "福州",        "厦门",        "莆田",        "三明",        "泉州",        "漳州",        "南平",        "龙岩",        "宁德",        "平潭",        "其他"    ],    "甘肃": [        "兰州",        "嘉峪关",        "金昌",        "白银",        "天水",        "酒泉",        "张掖",        "武威",        "定西",        "陇南",        "平凉",        "庆阳",        "临夏回族自治州",        "甘南藏族自治州",        "其他"    ],    "广东": [        "广州",        "深圳",        "珠海",        "汕头",        "佛山",        "韶关",        "湛江",        "肇庆",        "江门",        "茂名",        "惠州",        "梅州",        "汕尾",        "河源",        "阳江",        "清远",        "东莞",        "中山",        "潮州",        "揭阳",        "云浮",        "其他"    ],    "广西": [        "南宁",        "柳州",        "桂林",        "梧州",        "北海",        "防城港",        "钦州",        "贵港",        "玉林",        "百色",        "贺州",        "河池",        "来宾",        "崇左",        "南宁",        "柳州",        "其他"    ],    "贵州": [        "贵阳",        "六盘水",        "遵义",        "安顺",        "毕节",        "铜仁",        "黔西南",        "黔东南",        "黔南",        "其他"    ],    "海南": [        "海口",        "三亚",        "三沙",        "儋州",        "其他"    ],    "河北": [        "石家庄",        "唐山",        "秦皇岛",        "邯郸",        "邢台",        "保定",        "张家口",        "承德",        "沧州",        "廊坊",        "衡水",        "定州",        "辛集",        "其他"    ],    "黑龙江": [        "哈尔滨",        "齐齐哈尔",        "鸡西",        "鹤岗",        "双鸭山",        "大庆",        "伊春",        "佳木斯",        "七台河",        "牡丹江",        "黑河",        "绥化",        "大兴安岭",        "绥芬河",        "抚远",        "其他"    ],    "河南": [        "郑州",        "开封",        "洛阳",        "平顶山",        "安阳",        "鹤壁",        "新乡",        "焦作",        "濮阳",        "许昌",        "漯河",        "三门峡",        "南阳",        "商丘",        "周口",        "信阳",        "驻马店",        "济源",        "其他"    ],    "湖北": [        "武汉",        "黄石",        "十堰",        "宜昌",        "襄阳",        "鄂州",        "荆门",        "孝感",        "荆州",        "黄冈",        "咸宁",        "随州",        "恩施土家族苗族自治州",        "仙桃",        "潜江",        "天门",        "神农架",        "其他"    ],    "湖南": [        "长沙",        "株洲",        "湘潭",        "衡阳",        "邵阳",        "岳阳",        "常德",        "张家界",        "益阳",        "郴州",        "永州",        "怀化",        "娄底",        "湘西土家族苗族自治州",        "其他"    ],    "内蒙古": [        "呼和浩特",        "包头",        "乌海",        "赤峰",        "通辽",        "鄂尔多斯",        "呼伦贝尔",        "巴彦淖尔",        "乌兰察布盟",        "兴安盟",        "锡林郭勒盟",        "阿拉善盟",        "其他"    ],    "江苏": [        "南京",        "无锡",        "徐州",        "常州",        "苏州",        "南通",        "连云港",        "淮安",        "盐城",        "扬州",        "镇江",        "泰州",        "宿迁",        "其他"    ],    "江西": [        "南昌",        "九江",        "上饶",        "抚州",        "宜春",        "吉安",        "赣州",        "景德镇",        "萍乡",        "新余",        "鹰潭",        "其他"    ],    "吉林": [        "长春",        "吉林",        "四平",        "辽源",        "通化",        "白山",        "白城",        "松原",        "延边朝鲜族自治州",        "吉林省长白山保护开发区",        "梅河口",        "公主岭",        "其他"    ],    "辽宁": [        "沈阳",        "大连",        "鞍山",        "抚顺",        "本溪",        "丹东",        "锦州",        "营口",        "阜新",        "辽阳",        "盘锦",        "铁岭",        "朝阳",        "葫芦岛",        "其他"    ],    "宁夏": [        "银川",        "石嘴山",        "吴忠",        "固原",        "中卫",        "其他"    ],    "青海": [        "西宁",        "海东",        "海北",        "黄南",        "海南",        "果洛",        "玉树",        "海西"    ],    "山西": [        "太原",        "大同",        "阳泉",        "长治",        "晋城",        "朔州",        "晋中",        "运城",        "忻州",        "临汾",        "吕梁",        "其他"    ],    "山东": [        "济南",        "青岛",        "淄博",        "枣庄",        "东营",        "烟台",        "潍坊",        "济宁",        "泰安",        "威海",        "日照",        "莱芜",        "临沂",        "德州",        "聊城",        "滨州",        "菏泽",        "其他"    ],    "上海": [        "上海"    ],    "四川": [        "成都",        "绵阳",        "自贡",        "攀枝花",        "泸州",        "德阳",        "广元",        "遂宁",        "内江",        "乐山",        "资阳",        "宜宾",        "南充",        "达州",        "雅安",        "阿坝",        "甘孜",        "凉山",        "眉山",        "广安",        "巴中",        "其他"    ],    "天津": [        "天津"    ],    "西藏": [        "拉萨",        "昌都",        "山南",        "日喀则",        "那曲",        "阿里",        "林芝",        "其他"    ],    "新疆": [        "乌鲁木齐",        "克拉玛依",        "吐鲁番",        "哈密",        "阿克苏",        "喀什",        "和田",        "昌吉",        "博尔塔拉",        "巴音郭楞",        "克孜勒苏",        "伊犁",        "其他"    ],    "云南": [        "昆明",        "曲靖",        "玉溪",        "昭通",        "保山",        "丽江",        "普洱",        "临沧",        "德宏",        "怒江",        "迪庆",        "大理",        "楚雄",        "红河",        "文山",        "西双版纳",        "其他"    ],    "浙江": [        "杭州",        "宁波",        "温州",        "嘉兴",        "湖州",        "绍兴",        "金华",        "衢州",        "舟山",        "台州",        "丽水",        "其他"    ],    "陕西": [        "西安",        "宝鸡",        "铜川",        "咸阳",        "渭南",        "延安",        "汉中",        "榆林",        "安康",        "商洛",        "杨凌示范区",        "其他"    ]}
View Code

2、页面引入省市 数据的js。

3、js部分

$(function() {                $.each(citydata, function (key, value) {            //根据数据创建option并追加到select上            var option = "";            options += option;        });        $("[name='province']").after(options);    });function getcity(pro){        var province = $(pro).val();        var city = $("[name='city']");        //找到市的信息        var citys = citydata[province];        //删除原来市的信息        city.empty();        city.append("");        //添加option        $.each(citys, function (index, item) {            city.append("");        });    }

4、下拉框定义。

    

完成。

转载于:https://www.cnblogs.com/enenen/p/9323771.html

你可能感兴趣的文章
IHttpHandler 在SharePoint中的应用
查看>>
c# 关闭软件 进程 杀死进程
查看>>
swift集成alamofire的简单封装
查看>>
javascript模块化、模块加载器初探
查看>>
每天工作4小时的程序员【转】
查看>>
替换空格
查看>>
css中的垂直居中方法
查看>>
android上line-height的问题
查看>>
php相关书籍视频
查看>>
java web项目流程小结
查看>>
PL/SQL Developer远程访问Oracle数据库
查看>>
Ubuntu中Could not get lock /var/lib/dpkg/lock解决方案
查看>>
细说浏览器特性检测(2)-通用事件检测
查看>>
完美数据迁移-MongoDB Stream的应用
查看>>
二、JavaScript基础 学好jQuery要了解的
查看>>
Hibernate之继承映射
查看>>
【C#公共帮助类】给大家分享一些加密算法 (DES、HashCode、RSA、AES等)
查看>>
ORA-06502 when awr report produce
查看>>
check_partition_aft_merge.sql
查看>>
record-09 ATM 过程思想 综合练习
查看>>