<!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. python之路——7

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1. 小数据池 int -5---256 str 特殊字符 *202. ASCII码 8位 1字节 - ...

  2. 读书笔记——《redis入门指南（第2版）》第四章 进阶——4.1-5

    .1事务 redis中事务是一组命令的集合. 事务同命令一样都是redis的最小执行单位,Redis保证一个事务中的命令要么都执行,要么都不执行.如果redisClient在发送EXEC命令前掉线,则 ...

  3. TypeScript 模块系统

    https://www.cnblogs.com/niklai/p/5808789.html

  4. python第三方库Requests的基本使用

    Requests 是用python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满足 HTT ...

  5. DeepLearning初窥门径

    说明: 最近在看Ng的DL课程,感觉说的非常好,浅显易懂! 本来打算记录一下自己的学习过程,网上几个大神总结的太完美了,根本没必要自己去写了,而且浪费时间~~ 网易地址:http://mooc.stu ...

  6. Tesseract-OCR的简单使用与训练

    Tesseract,一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,与Microsoft Office Docu ...

  7. int和Integer的自动拆箱/装箱相关问题

    java中为没一种基本类型都提供相应的包装类型. byte,short,char,int,long,float,double和boolean Byte,Short,Character,Integer, ...

  8. Linux命令简写和全称

    alias :Create your own name for a commandcat: Concatenate 串联cd:Change directory 切换目录cp: Copy file 复制 ...

  9. 二维凸包 Graham扫描算法

    题目链接: http://poj.org/problem?id=1113 求下列点的凸包 求得凸包如下: Graham扫描算法: 找出最左下的点,设为一号点,将其它点对一号点连线,按照与x轴的夹角大小 ...

  10. java项目测试或者不使用request，如何获取webroot路径

    1.使用jdk中的方法,然后根据项目编译后的文件存在的位置,获取到classes目录,然后向上级查询获取String path = EngineTest.class.getResource(" ...