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

随机推荐

sql server 高可用故障转移(1)
原文:sql server 高可用故障转移(1) 群集准备工作个人电脑内存12G,处理器 AMD A6-3650CPU主频2.6GHz 虚拟机 VMware Workstation 12 数据库 ...
flask的session解读及flask_login登录过程研究
#!/usr/bin/env python # -*- coding: utf-8 -*- from itsdangerous import URLSafeTimedSerializer from f ...
C++中virtual（虚函数）的用法
在面向对象的C++语言中,虚函数(virtual function)是一个非常重要的概念. 什么是虚函数: 虚函数是指一个类中你希望重载的成员函数 ,当你用一个基类指针或引用指向一个继承类对 ...
java-selenium（二）富文本编辑框的处理
首先先看一下什么是富文本编辑框 HTML源码思路:首先先进入到iframe中,再用js写,最后切出iframe 如果想要换行可以在换行的地方加上<br> 如果添加的文本中包含单引号.双引 ...
[转] docker rmi命令-删除image
原文:http://www.simapple.com/341.html ---------------------------------------------------------------- ...
转：如何查看MyEclipse包含的Eclipse的版本号
如何查看MyEclipse包含的Eclipse的版本号博客分类: 技术 myeclipseeclipse 说到Eclipse的版本号,可能只有在安装插件时才会需要到,有人就曾在安装svn时为了找到 ...
【Javascript 基础】对象
1 创建对象 Javascript 支持对象的概率.有多种方法可以用来创建对象. <!DOCTYPE html> <html lang="en"> < ...
File:方法（具体）
File方法: Name()方法:获取File的名称. getPath()方法:获取File的路径. getAbsolutePath()方法:获取文件或文件夹的绝对路径名称. getParent()方 ...
tab menu
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
icvEvalCARTHaarClassifier
/* *icvEvalCARTHaarClassifier *作用:通过计算haar特征值,来分配非叶子节点直到出现叶子节点,最后返回输出值val. */ float icvEvalCARTHaar ...

JQuery+Json 省市区三级联动

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

随机推荐

热门专题