<!DOCTYPE html>
<head>
<title>省市区三级联动[JSON+Jquery]</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="json/CityJson.js" type="text/javascript"></script>
<script src="json/ProJson.js" type="text/javascript"></script>
<script src="json/DistrictJson.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {

$.each(province, function (k, p) {
var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
$("#selProvince").append(option);
});

$("#selProvince").change(function () {
var selValue = $(this).val();
$("#selCity option:gt(0)").remove();

$.each(city, function (k, p) {
if (p.ProID == selValue) {
var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
$("#selCity").append(option);
}
});

});

$("#selCity").change(function () {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove();

$.each(District, function (k, p) {
if (p.CityID == selValue) {
var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";
$("#selDistrict").append(option);
}
});
});
});
</script>
</head>
<body>
<select id="selProvince">
<option value="0">--请选择省份--</option>
</select>
<select id="selCity">
<option value="0">--请选择城市--</option>

</select>
<select id="selDistrict">
<option value="0">--请选择区/县--</option>
</select>
<input type="button" id="btnOK" value="确定" />
</body>
</html>

---------------------------------------------------------------------------

省：ProJson.js

province = [{ "ProID": 1, "ProName": "北京市", "ProSort": 1, "ProRemark": "直辖市" }, { "ProID": 2, "ProName": "天津市", "ProSort": 2, "ProRemark": "直辖市" }, { "ProID": 3, "ProName": "河北省", "ProSort": 5, "ProRemark": "省份" }, { "ProID": 4, "ProName": "山西省", "ProSort": 6, "ProRemark": "省份" }, { "ProID": 5, "ProName": "内蒙古自治区", "ProSort": 32, "ProRemark": "自治区" }, { "ProID": 6, "ProName": "辽宁省", "ProSort": 8, "ProRemark": "省份" }, { "ProID": 7, "ProName": "吉林省", "ProSort": 9, "ProRemark": "省份" }, { "ProID": 8, "ProName": "黑龙江省", "ProSort": 10, "ProRemark": "省份" }, { "ProID": 9, "ProName": "上海市", "ProSort": 3, "ProRemark": "直辖市" }, { "ProID": 10, "ProName": "江苏省", "ProSort": 11, "ProRemark": "省份" }, { "ProID": 11, "ProName": "浙江省", "ProSort": 12, "ProRemark": "省份" }, { "ProID": 12, "ProName": "安徽省", "ProSort": 13, "ProRemark": "省份" }, { "ProID": 13, "ProName": "福建省", "ProSort": 14, "ProRemark": "省份" }, { "ProID": 14, "ProName": "江西省", "ProSort": 15, "ProRemark": "省份" }, { "ProID": 15, "ProName": "山东省", "ProSort": 16, "ProRemark": "省份" }, { "ProID": 16, "ProName": "河南省", "ProSort": 17, "ProRemark": "省份" }, { "ProID": 17, "ProName": "湖北省", "ProSort": 18, "ProRemark": "省份" }, { "ProID": 18, "ProName": "湖南省", "ProSort": 19, "ProRemark": "省份" }, { "ProID": 19, "ProName": "广东省", "ProSort": 20, "ProRemark": "省份" }, { "ProID": 20, "ProName": "海南省", "ProSort": 24, "ProRemark": "省份" }, { "ProID": 21, "ProName": "广西壮族自治区", "ProSort": 28, "ProRemark": "自治区" }, { "ProID": 22, "ProName": "甘肃省", "ProSort": 21, "ProRemark": "省份" }, { "ProID": 23, "ProName": "陕西省", "ProSort": 27, "ProRemark": "省份" }, { "ProID": 24, "ProName": "新 疆维吾尔自治区", "ProSort": 31, "ProRemark": "自治区" }, { "ProID": 25, "ProName": "青海省", "ProSort": 26, "ProRemark": "省份" }, { "ProID": 26, "ProName": "宁夏回族自治区", "ProSort": 30, "ProRemark": "自治区" }, { "ProID": 27, "ProName": "重庆市", "ProSort": 4, "ProRemark": "直辖市" }, { "ProID": 28, "ProName": "四川省", "ProSort": 22, "ProRemark": "省份" }, { "ProID": 29, "ProName": "贵州省", "ProSort": 23, "ProRemark": "省份" }, { "ProID": 30, "ProName": "云南省", "ProSort": 25, "ProRemark": "省份" }, { "ProID": 31, "ProName": "西藏自治区", "ProSort": 29, "ProRemark": "自治区" }, { "ProID": 32, "ProName": "台湾省", "ProSort": 7, "ProRemark": "省份" }, { "ProID": 33, "ProName": "澳门特别行政区", "ProSort": 33, "ProRemark": "特别行政区" }, { "ProID": 34, "ProName": "香港特别行政区", "ProSort": 34, "ProRemark": "特别行政区"}];

---------------------------------------------------------------------------

市：CityJson.js

city = [{ "CityID": 1, "CityName": "北京市", "ProID": 1, "CitySort": 1 }, { "CityID": 2, "CityName": "天津市", "ProID": 2, "CitySort": 2 }, { "CityID": 3, "CityName": "上海市", "ProID": 9, "CitySort": 3 }, { "CityID": 4, "CityName": "重庆市", "ProID": 27, "CitySort": 4 }, { "CityID": 5, "CityName": "邯郸市", "ProID": 3, "CitySort": 5 }, { "CityID": 6, "CityName": "石家庄市", "ProID": 3, "CitySort": 6 }, { "CityID": 7, "CityName": "保定市", "ProID": 3, "CitySort": 7 }, { "CityID": 8, "CityName": "张家口市", "ProID": 3, "CitySort": 8 }, { "CityID": 9, "CityName": "承德市", "ProID": 3, "CitySort": 9 }, { "CityID": 10, "CityName": "唐山市", "ProID": 3, "CitySort": 10 }, { "CityID": 11, "CityName": "廊坊市", "ProID": 3, "CitySort": 11 }, { "CityID": 12, "CityName": "沧州市", "ProID": 3, "CitySort": 12 }, { "CityID": 13, "CityName": "衡水市", "ProID": 3, "CitySort": 13 }, { "CityID": 14, "CityName": "邢台市", "ProID": 3, "CitySort": 14 },

。。。。。。。 { "CityID": 370, "CityName": "澳门特别行政区", "ProID": 33, "CitySort": 370 }, { "CityID": 371, "CityName": "香港特别行政区", "ProID": 34, "CitySort": 371}];

---------------------------------------------------------------------------

区、县：DistrictJson.js

District=[{"Id":1,"DisName":"东城区","CityID":1,"DisSort":null},{"Id":2,"DisName":"西城区","CityID":1,"DisSort":null},{"Id":3,"DisName":"崇文区","CityID":1,"DisSort":null},{"Id":4,"DisName":"宣武区","CityID":1,"DisSort":null},{"Id":5,"DisName":"朝阳区","CityID":1,"DisSort":null},{"Id":6,"DisName":"丰台区","CityID":1,"DisSort":null},{"Id":7,"DisName":"石景山区","CityID":1,"DisSort":null},{"Id":8,"DisName":"海淀区","CityID":1,"DisSort":null},{"Id":9,"DisName":"门头沟区","CityID":1,"DisSort":null},{"Id":10,"DisName":"房山区","CityID":1,"DisSort":null},{"Id":11,"DisName":"通州区","CityID":1,"DisSort":null},{"Id":12,"DisName":"顺义区","CityID":1,"DisSort":null},{"Id":13,"DisName":"昌平区","CityID":1,"DisSort":null},{"Id":14,"DisName":"大兴区","CityID":1,"DisSort":null},{"Id":15,"DisName":"怀柔区","CityID":1,"DisSort":null},{"Id":16,"DisName":"平谷区","CityID":1,"DisSort":null},{"Id":17,"DisName":"密云县","CityID":1,"DisSort":null},{"Id":18,"DisName":"延庆县","CityID":1,"DisSort":null},{"Id":19,"DisName":"和平区","CityID":2,"DisSort":null},{"Id":20,"DisName":"河东区","CityID":2,"DisSort":null},{"Id":21,"DisName":"河西区","CityID":2,"DisSort":null},{"Id":22,"DisName":"南开区","CityID":2,"DisSort":null},{"Id":23,"DisName":"河北区","CityID":2,"DisSort":null},。。。。。{"Id":2821,"DisName":"突泉县","CityID":361,"DisSort":null},{"Id":2822,"DisName":"阿拉善左旗","CityID":362,"DisSort":null},{"Id":2823,"DisName":"阿拉善右旗","CityID":362,"DisSort":null},{"Id":2824,"DisName":"额济纳旗","CityID":362,"DisSort":null}];

省市区三级联动[JSON+Jquery]的更多相关文章

  1. 省市区三级联动（jquery+ajax）（封装和不封装两种方式）-----2017-05-15

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  2. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  3. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  4. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  5. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

  6. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  7. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  8. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

  9. 省市区三级联动——思路、demo、示例

    说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...

随机推荐

  1. c++ STL map 结构体

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...

  2. Lua函数[转]

    在大多数Lua语法分析中可以获得这些标准Lua函数. 无可争辩, 我们可以查阅Lua网站, 但是一些少了的函数被Blizzard进行了调整. 下面列出了所有Lua函数. WoW API中的Lua注意在 ...

  3. GNU make简介

    引言 接触开源项目有一段时间了,对自动化编译工具一直很好奇.近期有时间正好整理下GNU make.后续可以深入了解下. 本文主要整理GNU make的学习的基本资料,同时简要介绍make的功能.语法. ...

  4. SecurityError: Blocked a frame with origin from accessing a cross-origin frame

    问题描述:浏览器报错I am loading an <iframe> in my HTML page and trying to access the elements within it ...

  5. Django套用现成模板，导入css，js，images等文件

    https://blog.csdn.net/mildddd/article/details/79557803

  6. JAVA-数据库之Statement对象

    相关资料:<21天学通Java Web开发> 语句对象Statement1.语句对象Statement可以用来执行SQL语句,从而实现数据库操作.2.可以通过调用连接对象的createSt ...

  7. 1. pyhanlp介绍和简单应用

    1. pyhanlp介绍和简单应用 2. 观点提取和聚类代码详解 1. 前言 中文分词≠自然语言处理! 中文分词只是第一步:HanLP从中文分词开始,覆盖词性标注.命名实体识别.句法分析.文本分类等常 ...

  8. [转]Httrack工具与使用指南

    HTTrack工具介绍 HTTrack是一个网站镜像工具,本来是用来抓取网站做离线浏览用的.但是HTTrack的爬虫特性和搜索引擎蜘蛛爬虫非常的像,这也逐渐应用到 SEO(搜索引擎优化)工作中.其实这 ...

  9. strace命令学习

    跟踪一个php程序的运行: strace -s 1000 -f -o test.log php test.php 对于守护进程(后台一直跑的进程) php test.php &   得到它的P ...

  10. centos7 安装oracle jdk 与openjdk 实现切换

    1. 分别安装oraclejdk 与openjdk #下载安装oraclejdk rpm -ivh --prefix=/usr.java/java1.8 ***.rpm #安装openjdk su - ...