<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery3.min.js"></script>
</head>
<body>
<select id="pro">
<option>——请选择省份——</option>
</select>
<select id="city">
<option>——请选择城市——</option>
</select>
<select id="district">
<option>——请选择区县——</option>
</select>
</body>
<script>
var provience = [{"ID": 1,"NAME": "海南省"},{"ID": 2,"NAME": "山西省"},{"ID": 3,"NAME": "湖北省"}];
var city = [{"ID": 11,"NAME": "海口市", "PARENT_ID": 1},{"ID": 12,"NAME": "三亚市", "PARENT_ID": 1},{"ID": 13,"NAME": "三沙市","PARENT_ID": 1},{"ID": 14,"NAME": "儋州市","PARENT_ID": 1},{"ID": 15,"NAME": "五指山市","PARENT_ID": 1},{"ID": 16,"NAME": "琼海市","PARENT_ID": 1},{"ID": 21,"NAME": "太原市","PARENT_ID": 2},{"ID": 22,"NAME": "大同市","PARENT_ID": 2},{"ID": 23,"NAME": "阳泉市","PARENT_ID": 2},{"ID": 24,"NAME": "长治市","PARENT_ID": 2},{"ID": 25,"NAME": "晋城市","PARENT_ID": 2},{"ID": 26,"NAME": "朔州市","PARENT_ID": 2},{"ID": 31,"NAME": "武汉市","PARENT_ID": 3},{"ID": 32,"NAME": "黄冈市","PARENT_ID": 3},{"ID": 33,"NAME": "黄石市","PARENT_ID": 3},{"ID": 34,"NAME": "宜昌市","PARENT_ID": 3},{"ID": 35,"NAME": "襄阳市","PARENT_ID": 3},{"ID": 36,"NAME": "鄂州市","PARENT_ID": 3},{"ID": 37,"NAME": "荆门市","PARENT_ID": 3}];
var district = [{ "ID": 111, "NAME": "秀英区", "PARENT_ID": 11},
{ "ID": 112, "NAME": "龙华区", "PARENT_ID": 11},
{ "ID": 113, "NAME": "琼山区", "PARENT_ID": 11},
{ "ID": 114, "NAME": "美兰区", "PARENT_ID": 11},
{ "ID": 121, "NAME": "河西区", "PARENT_ID": 12},
{ "ID": 122, "NAME": "河东区", "PARENT_ID": 12},
{ "ID": 131, "NAME": "西沙群岛", "PARENT_ID": 13},
{ "ID": 132, "NAME": "中沙群岛", "PARENT_ID": 13},
{ "ID": 133, "NAME": "南沙群岛", "PARENT_ID": 13},
{ "ID": 141, "NAME": "那大镇", "PARENT_ID": 14},
{ "ID": 142, "NAME": "和庆镇", "PARENT_ID": 14},
{ "ID": 143, "NAME": "南丰镇", "PARENT_ID": 14},
{ "ID": 144, "NAME": "大成镇", "PARENT_ID": 14},
{ "ID": 151, "NAME": "五指山1", "PARENT_ID": 15},
{ "ID": 152, "NAME": "五指山2", "PARENT_ID": 15},
{ "ID": 153, "NAME": "五指山3", "PARENT_ID": 15},
{ "ID": 154, "NAME": "琼海市1", "PARENT_ID": 16},
{ "ID": 155, "NAME": "琼海市2", "PARENT_ID": 16},
{ "ID": 156, "NAME": "琼海市3", "PARENT_ID": 16},
{ "ID": 157, "NAME": "太原市1", "PARENT_ID": 21},
{ "ID": 158, "NAME": "太原市2", "PARENT_ID": 21},
{ "ID": 159, "NAME": "太原市3", "PARENT_ID": 21},
{ "ID": 160, "NAME": "大同市1", "PARENT_ID": 22},
{ "ID": 159, "NAME": "大同市2", "PARENT_ID": 22},
{ "ID": 160, "NAME": "大同市3", "PARENT_ID": 22},
{ "ID": 161, "NAME": "阳泉市1", "PARENT_ID": 23},
{ "ID": 162, "NAME": "阳泉市2", "PARENT_ID": 23},
{ "ID": 163, "NAME": "阳泉市3", "PARENT_ID": 23},
{ "ID": 164, "NAME": "长治市1", "PARENT_ID": 24},
{ "ID": 165, "NAME": "长治市2", "PARENT_ID": 24},
{ "ID": 166, "NAME": "长治市3", "PARENT_ID": 24},
{ "ID": 167, "NAME": "晋城市1", "PARENT_ID": 25},
{ "ID": 168, "NAME": "晋城市2", "PARENT_ID": 25},
{ "ID": 169, "NAME": "晋城市3", "PARENT_ID": 25},
{ "ID": 171, "NAME": "朔州市1", "PARENT_ID": 26},
{ "ID": 172, "NAME": "朔州市2", "PARENT_ID": 26},
{ "ID": 173, "NAME": "朔州市3", "PARENT_ID": 26},
{ "ID": 174, "NAME": "武昌区", "PARENT_ID": 31},
{ "ID": 175, "NAME": "洪山区", "PARENT_ID": 31},
{ "ID": 176, "NAME": "蔡甸区", "PARENT_ID": 31},
{ "ID": 177, "NAME": "蕲春县", "PARENT_ID": 32},
{ "ID": 178, "NAME": "蕲春1", "PARENT_ID": 32},
{ "ID": 179, "NAME": "蕲春2", "PARENT_ID": 32},
{ "ID": 180, "NAME": "黄石市1", "PARENT_ID": 33},
{ "ID": 181, "NAME": "黄石市2", "PARENT_ID": 33},
{ "ID": 182, "NAME": "黄石市3", "PARENT_ID": 33},
{ "ID": 183, "NAME": "宜昌市1", "PARENT_ID": 34},
{ "ID": 184, "NAME": "宜昌市2", "PARENT_ID": 34},
{ "ID": 185, "NAME": "宜昌市3", "PARENT_ID": 34},
{ "ID": 186, "NAME": "樊城区", "PARENT_ID": 35},
{ "ID": 187, "NAME": "枣阳市", "PARENT_ID": 35},
{ "ID": 188, "NAME": "老河口", "PARENT_ID": 35},
{ "ID": 189, "NAME": "华容区", "PARENT_ID": 36},
{ "ID": 190, "NAME": "鄂城区", "PARENT_ID": 36},
{ "ID": 191, "NAME": "葛店开发区", "PARENT_ID": 36},
{ "ID": 191, "NAME": "荆门市1", "PARENT_ID": 37},
{ "ID": 191, "NAME": "荆门市2", "PARENT_ID": 37},
{ "ID": 191, "NAME": "荆门市3", "PARENT_ID": 37}] ;
console.log(city)

//省级赋值
$.each(provience,function(k,p){//k表示provience的下标，p代表对应下标的值
var option = "<option value="+p.ID+">"+p.NAME+"</option>";　　//声明一个变量保存option标签，并动态添加值
$("#pro").append(option);　　//将保存的option标签添加到省级的下拉框
});
//省级选择
$("#pro").change(function(){
var selValue = $(this).val();　　//保存省级的val值
$("#city option:gt(0)").remove(); //每次改变省份，清除大于0的option
$("#district option:gt(0)").remove();
$.each(city,function(k,p){
if(p.PARENT_ID == selValue){　　//如果省级的val值与市级相对应则获取对应的val和城市名称
var option = "<option value="+p.ID+">"+p.NAME+"</option>";
$("#city").append(option);
}

})
})
//市级选择
$("#city").change(function () {
var selValue = $(this).val();
$("#district option:gt(0)").remove();

$.each(district, function (k, p) {
if(p.PARENT_ID == selValue){
var option = "<option value="+p.ID+">"+p.NAME+"</option>";
$("#district").append(option);
}
});
});
</script>
</html>

jQuery三级联动的更多相关文章

  1. jQuery三级联动效果代码（省、市、区）

    很长时间都不用jquery了,有人问我jquery写三级联动的插件我就写好了发出来吧,正好需要的人都可以看看. 一.html代码 <!DOCTYPE html> <html> ...

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

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

  3. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  4. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  5. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  6. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  7. jquery省市区三级联动

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

  8. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  9. 用php+mysql+ajax+jquery做省市区三级联动

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

随机推荐

  1. EL(Expression Language)和JSTL标签(JSP Standard Tag Library)

    一.EL表达式: Expression Language提供了在 JSP 脚本编制元素范围外(例如:脚本标签)使用运行时表达式的功能.脚本编制元素是指页面中能够用于在JSP 文件中嵌入 Java代码的 ...

  2. UEditor (富文本编译器)

    下载网址:https://ueditor.baidu.com/website/download.html 开发文档:http://fex.baidu.com/ueditor/

  3. Spring的生命周期

    转:https://blog.csdn.net/liuxilil/article/details/4676088 Spring的生命周期. 容器启动,实例化所有实现了BeanFactoyPostPro ...

  4. 电商中的库存管理实现-mysql与redis

        库存是电商系统的核心环节,如何做到不少卖,不超卖是库存关心的核心业务问题.业务量大时带来的问题是如何更快速的处理库存计算. 此处以最简模式来讨论库存设计. 以下内容只做分析,不能直接套用,欢迎 ...

  5. Django文件存储(一)默认存储系统

    Django默认使用的文件存储系统'django.core.files.storage.FileSystemStorage'是一个本地存储系统,由settings中的DEFAULT_FILE_STOR ...

  6. 开源项目初涉（C++自我学习开始）

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://i.cnblogs.com/EditPosts.aspx?postid=8428885 临近2018农历新年,我还在上班,哈哈. ...

  7. 2008nian元旦

    我要做---->> 控制财务状况---1记账 2 炒股或基金 3预算 锻炼---每次要达到锻炼的效果 学习计划-- 1报班架构 2 项目管理 3读书 爱好---做饭,收拾整理 职业规划. ...

  8. canvas 2.0

    了解 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的.所以,如果你想学习Canvas画图,你必须要 ...

  9. git 提交小备注

    总结: ·  git add -A  提交所有变化 ·  git add -u  提交被修改(modified)和被删除(deleted)文件,不包括新文件(new) ·  git add .  提交 ...

  10. 下载安装 STS（Spring Tool Suite），推荐对应 Eclipse 版本号，适用于Windows32位（xp、2003）

    sts下载地址:https://spring.io/tools/sts/legacy 虽然sts内置了版本对应的eclipse,仍推荐使用当前环境下稳定使用的eclipse版本. Start 找到ec ...