zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    JSJ—类与对象
    JSJ—案例谈面向对象
    实现简单神经网络
    SSM+Netty项目结合思路
    SSM-Netty实现软硬件通信,真实项目案例
    Netty实战十四之案例研究(一)
    Netty实战十三之使用UDP广播事件
    Netty实战十一之预置的ChannelHandler和编解码器
    Netty实战十二之WebSocket
    Netty实战十之编解码器框架
  • 原文地址:https://www.cnblogs.com/shuaichao/p/4775736.html
Copyright © 2011-2022 走看看