<!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. angular-1.3 之ng-model-options指令

    ng-model-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法. ng-model-options允许我们控制ng-model何时进行同步. 比如:1.当某个确 ...

  2. linux安全配置检查脚本_v0.5

    看到网上有人分享了一些linux系统的基线检查脚本,但有些检查项未必适合自己或者说检查的不够完善, 计划按着自己的需求重新写一份出来,其中脚本的检查范围在不断更新中. 脚本内容: [root@loca ...

  3. C++对象模型-构造函数语意学

    关于C++,最常听到的一个抱怨就是:编译器背着程序员干了太多的事情. default constructor函数的构建 default constructors会在需要的时候被编译器创建出来,关键字是 ...

  4. python（46）：对字典进行排序，多键值排序

    注:改于2017-12-07,python3 下 Removed dict.iteritems(), dict.iterkeys(), and dict.itervalues(). Instead: ...

  5. iOS-图片浏览器(字典和plist文件的使用)

    // //  ViewController.m //  19-图片浏览器 // //  Created by hongqiangli on 2017/7/31. //  Copyright © 201 ...

  6. 【机器学习】粗糙集（Rough Set Approach）

    粗糙集理论是一种研究不精确,不确定性知识的数学工具. 粗糙集理论的知识表达方式一般采用信息表或称为信息系统的形式,它可以表现为四元有序组K=(U,A,V,P).其中U为对象的全体,即论域:A是属性全体 ...

  7. 通过Python的JIRA库操作JIRA

    [本文出自天外归云的博客园] 前提 需要安装jira库: pip install jira 编写脚本 例如,我想统计一下某一jira的备注里是否有如下信息,没有则给予提示: [产品需求文档地址]:ht ...

  8. [转]JAVA泛型通配符T，E，K，V区别，T以及Class<T>，Class<?>的区别

    原文地址:https://www.jianshu.com/p/95f349258afb 1. 先解释下泛型概念 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被 ...

  9. 编辑距离算法（Levenshtein）

    编辑距离定义: 编辑距离,又称Levenshtein距离,是指两个字串之间,由一个转成另一个所需的最少编辑操作次数. 许可的编辑操作包括:将一个字符替换成另一个字符,插入一个字符,删除一个字符. 例如 ...

  10. JDK自带观察者的使用

    被观察者 package observerForJDK; import java.util.Observable; /** * 新闻派发器,当有新的新闻时派发给所有的订阅读者(观察者) */ publ ...