<!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. js基础系列之【原型和原型链】

    声明:形成本文的出发点仅仅是个人总结记录,避免遗忘,并非详实的教程:文中引用了经过个人加工的其它作者的内容,并非原创.学海无涯 引入问题 一般我们是这样写的: (需求驱动技术,疑问驱动进步) // 构 ...

  2. 详解卷积神经网络(CNN)

    详解卷积神经网络(CNN) 详解卷积神经网络CNN 概揽 Layers used to build ConvNets 卷积层Convolutional layer 池化层Pooling Layer 全 ...

  3. Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；

    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...

  4. Oracle 学习笔记(二)

    一.索引 表的数据是无序的,所以叫堆表(heap table),意思为随机存储数据.因为数据是随机存储的,所以在查询的时候需要全表扫描.索引就是将无序的数据有序化,这样就可以在查询数据的时候 减少数据 ...

  5. Lock的实现原理

    1. Lock 的简介及使用 Lock是java 1.5中引入的线程同步工具,它主要用于多线程下共享资源的控制.本质上Lock仅仅是一个接口(位于源码包中的java\util\concurrent\l ...

  6. android 开发 View _7_ 动态自定义View

    效果图: 代码: package com.example.lenovo.mydemo.myViewDemo; import android.content.Context; import androi ...

  7. nginx+python+windows 开始

    参考文章:http://www.testwo.com/article/311 参考如上文章基本能够完成hello world示例,我来记录下自己操作步骤及不同点,用以备忘,如果能帮助到其他人更好. 以 ...

  8. Calendar打印日历

    package com.example.demo; import org.junit.Test; import org.junit.runner.RunWith; import org.springf ...

  9. OpenGL中的渲染方式—— GL_TRIANGLE_STRIP

    OpenGL值绘制三角形的方式常用的有三种,分别是GL_TRIANGLES.GL_TRIANGLE_STRIP.GL_TRIANGLE_FAN,其效果如依次是: 从左起:第一个方式是GL_TRIANG ...

  10. Idea中运行项目时出现：未结束的字符串解决方案

    一般出现这种情况是编码不一致导致 解决办法: settings>file Encodings 编码设置成一致