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

随机推荐

windows上的docker容器内安装vim
Reading package lists... Done Building dependency tree Reading state information... Done E: Unable t ...
util.date.js
ylbtech-JavaScript-util: util.date.js 日期处理工具 1.A,JS-效果图返回顶部 1.B,JS-Source Code(源代码)返回顶部 1.B.1, m.y ...
.Net强大的列表控件XPTable [转]
.Net强大的列表控件XPTable http://blog.csdn.net/bodybo/article/details/7359531 XPTable的大名,想必C#开发的人都有所耳闻,使用下来 ...
BindVertexbuffer
stride 的意思是 inputstream.layout 的大小比如 description是 pos uv normal stride 就是一组pos uv normal的大小 ns 里面 ...
this的四种绑定规则总结
一.默认绑定 1.全局环境中,this默认绑定到window 2.函数独立调用时,this默认绑定到window console.log(this === window);//true functio ...
Java高级特性—消息队列
1)什么是jms JMS即Java消息服务(Java Message Service)应用程序接口是一个Java平台中关于面向消息中间件(MOM)的API. 它便于消息系统中的Java应用程序进行消息 ...
Angular 学习笔记——自定义指令
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
javascript - 封装ajax
封装,使用有示例. // 封装示例: function ajax(url, method, params, done) { var xhr = null; method = method.toUppe ...
Unity3D的脚本-script入门
来自:http://blog.163.com/shininglore@126/blog/static/961841802013412101454833/ Unity3D的基本操作很容易就能掌握了,接下 ...
DNS主从服务器+mysql
1 .背景 BIND从文本文件中获取数据,这样容易因为编辑错误出现问题. BIND需要将数据加载到内存中,如果域或者记录较多,会消耗大量的内存. BIND启动时解析Zone文件,对于一个记录较多的DN ...

JQuery+Json 省市区三级联动

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

随机推荐

热门专题