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

随机推荐

intel 硬盘加速技术
Intel Smart Response Technology 混合硬盘技术 Intel Rapid Storage Technology SERVER:
SQL SERVER Update from 使用陷阱
原文:SQL SERVER Update from 使用陷阱 update A set from A left join B on 此方法常用来使用根据一个表更新另一个表的数据,来进行数据同步更新.若 ...
C# Json格式字符串
转自:http://www.cnblogs.com/unintersky/p/3884712.html 将Json字符串转化成格式化表示的方法: 字符串反序列化为对象-->对象再序列化为字符串 ...
[置顶] kubernetes--资源管理
概念默认情况下,kubernetes不会限制pod等资源对象使用系统资源,单个pod或者容器可以无限制使用系统资源. kubernetes的资源管理分为资源请求(request)和资源限制(limi ...
JavaScript indexOf() 方法,获取元素的位置；Object.keys()获取对象的所有key的数组
定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) 参数描述 sea ...
python中pickle简介
2017-04-10 pickle是用来加工数据的,可以用来存取结构化数据. 例如: 一个字典a = {'name':'Timmy','age':26},用pickle.dump存到本地文件,所存数据 ...
质量平台建设之Mock平台
转载:http://blog.csdn.net/spark2008/article/details/51372913 基于目前系统越来越多,在项目开发过程中,减少各模块之间的开发依赖,另保证各个系统模 ...
Angular 学习笔记——自定义指令之间的交互
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
Win7删除虚拟机新建的用户怎么恢复
11月3日 VMware Workstation 7 Installed in Windows 7 AutoLogon Problem 安装VMware Workstation 7 在Windows ...
系统重装 Windows_VHD_辅助处理工具说明文档2
创建一个原始安装的VHD文件如果采用原始安装的方式,则在WIN7的原始光盘中将install.wim这个文件提取到一个文件夹中备用.如果采用Ghost安装的方式,则将Ghost备份文件提取出来(.G ...

JQuery+Json 省市区三级联动

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

随机推荐

热门专题