JQuery+Json 省市区三级联动

一、画面以及JS

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>省市区三级联动[JSON+Jquery]</title>
    <!--<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>-->
    <!--<script src="js/jquery-1.10.2.min.js"></script>-->
    <!--<script src="js/jquery-1.9.1.min.js"></script>-->
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="AraeDataJson/CityJson.js" type="text/javascript"></script>
    <script src="AraeDataJson/ProJson.js" type="text/javascript"></script>
    <script src="AraeDataJson/DistrictJson.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //省级赋值
            $.each(province, function (k, p) {
                var option = "<option value='" + p.ID + "'>" + p.NAME + "</option>";
                $("#ddlPROVINCE").append(option);
            });

            //省级选择
            $("#ddlPROVINCE").change(function () {
                var selValue = $(this).val();
                $("#hidPROVINCE_NAME").val($(this).find("option:selected").text());
                $("#ddlCITY option:gt(0)").remove();

                $.each(city, function (k, p) {
                    if (p.PARENT_ID == selValue) {
                        var option = "<option value='" + p.ID + "'>" + p.NAME + "</option>";
                        $("#ddlCITY").append(option);
                    }
                });

            });

            //市级选择
            $("#ddlCITY").change(function () {
                var selValue = $(this).val();
                $("#hidCITY_NAME").val($(this).find("option:selected").text());
                $("#ddlCOUNTY option:gt(0)").remove();

                $.each(District, function (k, p) {
                    if (p.PARENT_ID == selValue) {
                        var option = "<option value='" + p.ID + "'>" + p.NAME + "</option>";
                        $("#ddlCOUNTY").append(option);
                    }
                });
            });

            //区县选择
            $("#ddlCOUNTY").change(function () {
                var selValue = $(this).val();
                $("#hidCOUNTY_NAME").val($(this).find("option:selected").text());
            });
        });
    </script>
</head>
<body>
    <select id="ddlPROVINCE">
        <option value="0">--请选择省份--</option>
    </select>
    <input type="hidden" id="hidPROVINCE_NAME" name="PROVINCE_NAME" />
    <select id="ddlCITY">
        <option value="0">--请选择城市--</option>

    </select>
    <input type="hidden" id="hidCITY_NAME" name="CITY_NAME" />
    <select id="ddlCOUNTY">
        <option value="0">--请选择区/县--</option>
    </select>
    <input type="hidden" id="hidCOUNTY_NAME" name="COUNTY_NAME" />
    <input type="button" id="btnOK" value="确定" />
</body>
</html>

二、地区Json格式

1、省级

ProJson.js

province = [{ "ID": 22, "NAME": "海南省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 28, "NAME": "陕西省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 2, "NAME": "北京市", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 3, "NAME": "天津市", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 4, "NAME": "河北省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 5, "NAME": "山西省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 6, "NAME": "内蒙古自治区", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 8, "NAME": "吉林省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 9, "NAME": "黑龙江省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 10, "NAME": "上海市", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 12, "NAME": "浙江省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 13, "NAME": "安徽省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 14, "NAME": "福建省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 16, "NAME": "山东省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 17, "NAME": "河南省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 18, "NAME": "湖北省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 20, "NAME": "广东省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 21, "NAME": "广西壮族自治区", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 24, "NAME": "四川省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 26, "NAME": "云南省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 27, "NAME": "西藏自治区", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 29, "NAME": "甘肃省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 31, "NAME": "宁夏回族自治区", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 32, "NAME": "新疆维吾尔自治区", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 7, "NAME": "辽宁省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 11, "NAME": "江苏省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 15, "NAME": "江西省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 19, "NAME": "湖南省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 25, "NAME": "贵州省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 30, "NAME": "青海省", "PARENT_ID": 1, "DEEP": 1 }, { "ID": 23, "NAME": "重庆市", "PARENT_ID": 1, "DEEP": 1 }];

2、部分市级

CityJson.js

city = [{ "ID": 277, "NAME": "德阳市", "PARENT_ID": 24, "DEEP": 2 }, { "ID": 127, "NAME": "绍兴市", "PARENT_ID": 12, "DEEP": 2 }, { "ID": 131, "NAME": "台州市", "PARENT_ID": 12, "DEEP": 2 }, { "ID": 135, "NAME": "蚌埠市", "PARENT_ID": 13, "DEEP": 2 }, { "ID": 138, "NAME": "淮北市", "PARENT_ID": 13, "DEEP": 2 }, { "ID": 142, "NAME": "滁州市", "PARENT_ID": 13, "DEEP": 2 }, { "ID": 146, "NAME": "六安市", "PARENT_ID": 13, "DEEP": 2 }, { "ID": 150, "NAME": "福州市", "PARENT_ID": 14, "DEEP": 2 }, { "ID": 153, "NAME": "三明市", "PARENT_ID": 14, "DEEP": 2 }, { "ID": 157, "NAME": "龙岩市", "PARENT_ID": 14, "DEEP": 2 }, { "ID": 161, "NAME": "萍乡市", "PARENT_ID": 15, "DEEP": 2 }, { "ID": 164, "NAME": "鹰潭市", "PARENT_ID": 15, "DEEP": 2 }, { "ID": 168, "NAME": "抚州市", "PARENT_ID": 15, "DEEP": 2 }, { "ID": 172, "NAME": "淄博市", "PARENT_ID": 16, "DEEP": 2 }, { "ID": 176, "NAME": "潍坊市", "PARENT_ID": 16, "DEEP": 2 }, { "ID": 180, "NAME": "日照市", "PARENT_ID": 16, "DEEP": 2 }, { "ID": 183, "NAME": "德州市", "PARENT_ID": 16, "DEEP": 2 }, { "ID": 187, "NAME": "郑州市", "PARENT_ID": 17, "DEEP": 2 }, { "ID": 191, "NAME": "安阳市", "PARENT_ID": 17, "DEEP": 2 }, { "ID": 194, "NAME": "焦作市", "PARENT_ID": 17, "DEEP": 2 }, { "ID": 198, "NAME": "三门峡市", "PARENT_ID": 17, "DEEP": 2 }, { "ID": 202, "NAME": "周口市", "PARENT_ID": 17, "DEEP": 2 }, { "ID": 206, "NAME": "十堰市", "PARENT_ID": 18, "DEEP": 2 }, { "ID": 210, "NAME": "荆门市", "PARENT_ID": 18, "DEEP": 2 }, { "ID": 213, "NAME": "黄冈市", "PARENT_ID": 18, "DEEP": 2 }, { "ID": 216, "NAME": "恩施土家族苗族自治州", "PARENT_ID": 18, "DEEP": 2 }, { "ID": 221, "NAME": "衡阳市", "PARENT_ID": 19, "DEEP": 2 }, { "ID": 224, "NAME": "常德市", "PARENT_ID": 19, "DEEP": 2 }, { "ID": 228, "NAME": "永州市", "PARENT_ID": 19, "DEEP": 2 }, { "ID": 231, "NAME": "湘西土家族苗族自治州", "PARENT_ID": 19, "DEEP": 2 }, { "ID": 240, "NAME": "茂名市", "PARENT_ID": 20, "DEEP": 2 }, { "ID": 244, "NAME": "汕尾市", "PARENT_ID": 20, "DEEP": 2 }, { "ID": 289, "NAME": "巴中市", "PARENT_ID": 24, "DEEP": 2 }, { "ID": 186, "NAME": "菏泽市", "PARENT_ID": 16, "DEEP": 2 }];

3、部分县级

DistrictJson.js

District = [{ "ID": 444, "NAME": "丰润区", "PARENT_ID": 38, "DEEP": 3 }, { "ID": 445, "NAME": "滦县", "PARENT_ID": 38, "DEEP": 3 }, { "ID": 2094, "NAME": "远安县", "PARENT_ID": 207, "DEEP": 3 }, { "ID": 2508, "NAME": "钦南区", "PARENT_ID": 259, "DEEP": 3 }, { "ID": 2514, "NAME": "港南区", "PARENT_ID": 260, "DEEP": 3 }, { "ID": 2522, "NAME": "博白县", "PARENT_ID": 261, "DEEP": 3 }, { "ID": 2527, "NAME": "田阳县", "PARENT_ID": 262, "DEEP": 3 }, { "ID": 2531, "NAME": "靖西县", "PARENT_ID": 262, "DEEP": 3 }, { "ID": 2534, "NAME": "乐业县", "PARENT_ID": 262, "DEEP": 3 }, { "ID": 2537, "NAME": "隆林各族自治县", "PARENT_ID": 262, "DEEP": 3 }, { "ID": 2542, "NAME": "富川瑶族自治县", "PARENT_ID": 263, "DEEP": 3 }, { "ID": 2549, "NAME": "罗城仫佬族自治县", "PARENT_ID": 264, "DEEP": 3 }, { "ID": 2551, "NAME": "巴马瑶族自治县", "PARENT_ID": 264, "DEEP": 3 }, { "ID": 2554, "NAME": "宜州市", "PARENT_ID": 264, "DEEP": 3 }, { "ID": 2559, "NAME": "武宣县", "PARENT_ID": 265, "DEEP": 3 }, { "ID": 2561, "NAME": "合山市", "PARENT_ID": 265, "DEEP": 3 }, { "ID": 2565, "NAME": "宁明县", "PARENT_ID": 266, "DEEP": 3 }, { "ID": 1648, "NAME": "瑞昌市", "PARENT_ID": 162, "DEEP": 3 }, { "ID": 1650, "NAME": "渝水区", "PARENT_ID": 163, "DEEP": 3 }, { "ID": 1651, "NAME": "分宜县", "PARENT_ID": 163, "DEEP": 3 }, { "ID": 1652, "NAME": "市辖区", "PARENT_ID": 164, "DEEP": 3 }, { "ID": 1654, "NAME": "余江县", "PARENT_ID": 164, "DEEP": 3 }, { "ID": 1655, "NAME": "贵溪市", "PARENT_ID": 164, "DEEP": 3 }, { "ID": 1656, "NAME": "市辖区", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1658, "NAME": "赣县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1659, "NAME": "信丰县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1660, "NAME": "大余县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1662, "NAME": "崇义县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1663, "NAME": "安远县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1664, "NAME": "龙南县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1666, "NAME": "全南县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1667, "NAME": "宁都县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1668, "NAME": "于都县", "PARENT_ID": 165, "DEEP": 3 }, { "ID": 1670, "NAME": "会昌县", "PARENT_ID": 165, "DEEP": 3 }];

OK了，以下是完整代码下载地址：

 http://files.cnblogs.com/files/shuaichao/Newtonsoft.Json.rar

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/shuaichao/p/4775736.html