省市区三级联动[JSON+Jquery]
<!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]的更多相关文章
- 省市区三级联动（jquery+ajax）（封装和不封装两种方式）-----2017-05-15
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...
- JQuery+Json 省市区三级联动
一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...
- jquery省市区三级联动
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- jquery省市区三级联动(数据来源国家统计局官网)内附源码下载
很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...
- 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- 【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
- 省市区三级联动——思路、demo、示例
说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...
随机推荐
- C++11 POD类型
POD,全称plain old data,plain代表它是一个普通类型,old代表它可以与c兼容,可以使用比如memcpy()这类c中最原始函数进行操作.C++11中把POD分为了两个基本概念的集合 ...
- 项目bug
word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空 ...
- animate.css源码
/*! 动画属性: animation-name:动画名称 animation-duration:动画时间 animation-timing-function:动画的速度曲线 animation-de ...
- webpack打包调试react并使用babel编译jsx配置方法
http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...
- pyqt5-UDP消息发送
使用pyqt5做了一个发送UDP消息的客户端. 项目的完整代码已上传到 github 很简单的,只是用来向某个地址发送UPD消息.这个后面会用到新的功能也会更新.这里贴一下qt5做界面的代码,跟qt4 ...
- js使用正则替换掉所有的“”
需求,使用bootstrap 的 summernote上传图片,转换成文件流,上传给后台,上传用json传送,不能有“” content = content.replace(/\"/ig,& ...
- 【Unity】自定义编辑器窗口——拓展编辑器功能
最近学习了Unity自定义编辑器窗口,下面简单总结,方便用到时回顾. 新建一个脚本: using UnityEngine; using System.Collections; using UnityE ...
- Oracle锁表查询和解锁方法
数据库操作语句的分类 DDL:数据库模式定义语言,关键字:create DML:数据操纵语言,关键字:Insert.delete.update DCL:数据库控制语言 ,关键字:grant.remov ...
- Git做代码增量发布的重要用法 - --diff-filter
你以为有 bash git diff --name-only 就够了,NO! 对于PHP开发的系统来说,增量发布,一般只需部署新增的文件和有变动的文件,但很多时候,文件是删除的或重构成其它文件名或重构 ...
- C++生成全局唯一Guid
在软件开发中,我们经常需要一个唯一标识来标识一个对象,在PHP中,可以用UUID来获得全局唯一的ID,其实C++也内置了简单的GUID获得办法,猜想GUID应该是本机的特征以及运行的时间的一个哈希值, ...