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 ...

随机推荐

基本数据类型，包装类型，String类型数据之间的转换
java中所有的类都从java.lang.Object类派生而来,在java语言中,除基本数据类型以外,基本数据类型有java类库体统了包装类:Integer类保存整形变量,Boolean类保存布尔变 ...
scala函数返回值
1.使用returndef functionName ([参数列表]) : [return type] = { function body return [expr] } 2.直接把返回值写在最后: ...
namespace使用方法
https://blog.csdn.net/CHIERYU/article/details/50262043 参考值这文献
osx中Grapher的使用
Grapher 是一个可创建方程图形的应用程序,因此您能够使结果可视化.您能够输入各种数学函数,以二维和三维图形方式查看它们. 您甚至能够让图形动起来.用图形制作影片文件. 打开osx中的Graphe ...
8.使用JPA保存数据【从零开始学Spring Boot】
转载:http://blog.csdn.net/linxingliang/article/details/51636989 在看这一篇文档的话,需要先配置好JPA – hibernate. 总体步骤: ...
redis学习笔记——数据类型
对象处理机制 Redis 构建了自己的类型系统,这个系统的主要功能包括:• redisObject 对象.• 基于redisObject 对象的类型检查.• 基于redisObject 对象的显式多态 ...
倍福TwinCAT(贝福Beckhoff)基础教程松下伺服驱动器报错 81.0怎么办
同步周期有问题请确认MOTION的伺服周期是一致的,最好跟MAIN主程序也一样,所有周期都是2ms即可更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.yo ...
wmi在渗透测试中的运用
Abusing WMI to Build a Persistent, Asynchronous, and Fileless Backdoor 滥用 WMI 打造一个永久.异步.无文件后门 http:/ ...
C# DataTable 转 List(大家进来讨论讨论)
C# DataTable 转 List 方法,网上有好多,之前也收集了,感觉这个也不错,重要是自己要领会这里面的代码含义. 接不来我就把代码贴出来分享一下,大家觉得如果不好,请留言我,我来改进. us ...
Java 下载JDK账号
目前在官网下载低于jdk1.8的Javajdk的时候需要登陆,这边分享一个账号,方便下载账号:2696671285@qq.com 密码:Oracle123 javajdk下载地址:点击打开链接

JQuery+Json 省市区三级联动

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

随机推荐

热门专题