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了，以下是完整代码下载地址：
https://files.cnblogs.com/files/shuaichao/Newtonsoft.Json.rar
