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": , "NAME": "海南省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "陕西省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "北京市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "天津市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "河北省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "山西省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "内蒙古自治区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "吉林省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "黑龙江省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "上海市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "浙江省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "安徽省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "福建省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "山东省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "河南省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "湖北省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "广东省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "广西壮族自治区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "四川省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "云南省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "西藏自治区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "甘肃省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "宁夏回族自治区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "新疆维吾尔自治区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "辽宁省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "江苏省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "江西省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "湖南省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "贵州省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "青海省", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "重庆市", "PARENT_ID": , "DEEP":  }];

2、部分市级

CityJson.js

city = [{ "ID": , "NAME": "德阳市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "绍兴市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "台州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "蚌埠市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "淮北市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "滁州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "六安市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "福州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "三明市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "龙岩市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "萍乡市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "鹰潭市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "抚州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "淄博市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "潍坊市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "日照市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "德州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "郑州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "安阳市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "焦作市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "三门峡市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "周口市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "十堰市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "荆门市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "黄冈市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "恩施土家族苗族自治州", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "衡阳市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "常德市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "永州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "湘西土家族苗族自治州", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "茂名市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "汕尾市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "巴中市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "菏泽市", "PARENT_ID": , "DEEP":  }];

3、部分县级

DistrictJson.js

District = [{ "ID": , "NAME": "丰润区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "滦县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "远安县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "钦南区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "港南区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "博白县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "田阳县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "靖西县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "乐业县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "隆林各族自治县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "富川瑶族自治县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "罗城仫佬族自治县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "巴马瑶族自治县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "宜州市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "武宣县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "合山市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "宁明县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "瑞昌市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "渝水区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "分宜县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "市辖区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "余江县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "贵溪市", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "市辖区", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "赣县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "信丰县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "大余县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "崇义县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "安远县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "龙南县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "全南县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "宁都县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "于都县", "PARENT_ID": , "DEEP":  }, { "ID": , "NAME": "会昌县", "PARENT_ID": , "DEEP":  }];

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

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

JQuery+Json 省市区三级联动的更多相关文章

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
用php+mysql+ajax+jquery做省市区三级联动
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...
jquery全国省市区三级联动插件distpicker
使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...
js&&jQuery实现省市区三级联动
代码参考了:https://codepen.io/anon/pen/WzyNQB;根据自己的需要修改了一下,挂个出处 1.前端页面代码 <html> <head> <me ...
jquery json ajax三级联动
province_city_area.jsp <%@ page language="java" pageEncoding="UTF-8"%> < ...
用jsp实现省市区三级联动下拉
jsp+jquery实现省市区三级联动下拉不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...
省市区三级联动[JSON+Jquery]
<!DOCTYPE html><head> <title>省市区三级联动[JSON+Jquery]</title> <script src=&qu ...

随机推荐

虚拟机拷贝之后，发现系统内的开机自启动的nginx，不能自启动了
因业务需要,同事以某个虚拟机为模板,复制出其他的CentOS虚拟机时,发现原系统内的开机自启动的nginx,不能再自启动了. 好吧,那就重新注册一下 nginx 的开机自启动: # 先删除原来的注册: ...
Android 版 Facebook 登录
Android 版 Facebook SDK 让用户可以通过 Facebook 登录注册您的应用.通过 Facebook 登录您的应用时,用户可以向应用授予权限,以便您可以检索信息或以用户的身份在 F ...
【微信】微信小程序应用内的页面跳转在添加了tab以后就跳转不成功的问题解决
在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了原本代码如下: //事件处理函数 bindViewTap: function() { wx.na ...
IMAP 命令
最近学习了一下IMAP命令,现在也算总结一下学习的东西,先说说IMAP命令,如果你使用的是163.126邮箱,反正是网易家的邮箱,那么这里就有很多坑要踩了,因为网易邮箱的特殊性,由于网易邮箱在中国占有 ...
VUE -- JSONP的诞生、原理及应用实例
问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...
Kubernetes 针对资源紧缺处理方式的配置
如何在资源紧缺的情况下,保证 Node 的稳定性,是 Kubelet 需要面对的一个重要的问题.尤其对于内存和磁盘这种不可压缩的资源,紧缺就相当于不稳定. 在kubelet启动作为参数或者在配置文件中 ...
json格式在线解析
地址:https://www.bejson.com/ { "PN": "123456", "DomainName": ".gxyc ...
log4j教程 6、Logger方法
Logger类提供了多种方法来处理日志活动. Logger类不允许实例化一个新的记录器实例,但它提供了两个静态方法获得一个 Logger 对象: public static Logger getRoo ...
spring boot 引用外部配置文件
java -jar xx.jar -Dspring.config.location=/data/apps/xx/application-prod.properties
jconsole使用记录
jconsole/JVisualVM连接linux服务器查看JVM使用情况现需要在本地电脑上查看服务器的tomcat的整体的运行状态,使用jconsole工具. JMX配置拷贝$JAVA_HOME ...

JQuery+Json 省市区三级联动

JQuery+Json 省市区三级联动的更多相关文章

随机推荐

热门专题