<!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. CSS存在形式的引用

    撰写个css文件 直接引用css文件样式的内容.本质是将css文件拿过来

  2. 2017-2018-2 20165312 实验四《Android程序设计》实验报告

    2017-2018-2 20165312 实验四<Android程序设计>实验报告 一.安装Android Studio并进行Hello world测试和调试程序 安装Android St ...

  3. CRM 2016 Get IOrganizationService

    得到域认证下的IOrganizationService private IOrganizationService GetOrgService() { Uri orgServiceUri = new U ...

  4. js中的数值转换

    js中有3个函数可以把非数值转换为数值:Number().parseInt().parseFloat().其中Number()可以用于任何数据类型.parseInt()及parseFloat()用于将 ...

  5. 实战ELK（2） ElasticSearch 常用命令

    1.Cluster Health 集群状态 curl 'localhost:9200/_cat/health?v' yellow代表分片副本确实,因为我们现在只有一台机器. curl 'localho ...

  6. intellij ideal 在erlang 开发环境遇到的一些小问题

    由于之前重装电脑,公司电脑上的erlang开发环境重新搭建了,但是由于导入项目错误,直接将项目删掉重新又导入了一次,但是发现使用的sdk在联想输入方面出现了问题,写个东西记一下自己犯的错误. 修正方法 ...

  7. 一个ipv4到ipv6的移植问题

    之前在使用ipv4的时候,有一个模块是使用raw socket来发包,它使用的一个option是:IP_HDRINCL. 如果设置了IP_HDRINCL选项,则raw会绕过source validat ...

  8. JQEUERY案例

    案例效果: 点击显示全部奶粉品牌前: 点击后: 源码: <!DOCTYPE html><html><head> <meta charset="utf ...

  9. Codeforces Round #437 B. Save the problem!

    题意: 给你一个方案数,要求你输出满足该条件的总金额,面值数,和各个面值是多少,答案有多个,随便输出一个即可. Examples Input 18 Output 30 41 5 10 25 Input ...

  10. Setting up Scatter for Web Applications

    [Setting up Scatter for Web Applications] If you are still using scatter-js please move over to scat ...