<!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. FFmpeg(10)-利用FFmpeg进行视频像素格式和尺寸的转换(sws_getCachedContext(), sws_scale())

    一.包含头文件和库文件 像素格式的相关函数包含在 libswscale.so 库中,CMakeLists需要做下列改动: # swscale add_library(swscale SHARED IM ...

  2. python--笨方法学python 习题52

    笨方法学python是一本不错的python入门书籍.书的最后一节是一个web版的游戏程序,以下是程序代码: 1.项目的目录结构如下所示:skeleton\ app.py map.py templat ...

  3. 每日英语：Apple Unveils New iPads

    Apple Inc. 's answer to the increasingly cutthroat tablet-computer market: more product choices and ...

  4. 部署ArcGIS JS API 离线包(Tomcat与IIS)

    http://www.cnblogs.com/ventlam/archive/2012/12/13/2815583.html

  5. 转webstorm的快捷键

    止 静 java android 转-webstorm快捷键 默认配置-Eclipse的常用快捷键对照表 查找/代替 Webstorm快捷键 Eclipse快捷键 说明 ctrl+shift+N ct ...

  6. Leetcode:Flatten Binary Tree to Linked List 解题报告

    Flatten Binary Tree to Linked List Given a binary tree, flatten it to a linked list in-place. For ex ...

  7. Android SDK下载和更新失败解决方法

    原因是dl-ssl.google.com访问不到,解决方法就是修改C:\Windows\System32\drivers\etc\hosts文件.添加一行: 74.125.237.1       dl ...

  8. Eigen教程(9)

    整理下Eigen库的教程,参考:http://eigen.tuxfamily.org/dox/index.html Eigen并没有为matrix提供直接的Reshape和Slicing的API,但是 ...

  9. ios xib和代码的frame布局 iOSXib布局后代码修改约束的值

    如何修改autolayout 约束的值? 1 2 3 4 5 6 目前我已知的方法有5种 1.修改frame(有时候可能会不起作用,但可以做动画) 2.修改约束的float值 3.使用VisualFo ...

  10. Teleport Pro使用教程

    Teleport Pro使用教程 经常有不少网友来信询问,问如何做才可以把整个站点复制到硬盘上慢慢看,或者问teleportPro的使用方法.的确,离线浏览工具对于大部分网民来说是一个不错的工具,除非 ...