基于JSON级联查询(修改)省市区

最新推荐文章于 2024-05-08 12:42:46 发布

u013283966

最新推荐文章于 2024-05-08 12:42:46 发布

阅读量1.6k

点赞数 1

分类专栏： js 文章标签：基于JSON级联查询 select 三级联动查询省市区省市区 json地区数据 select

本文链接：https://blog.csdn.net/u013283966/article/details/77943573

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于JSON级联查询(修改)省市区
写了两个例子（1.选择省市区操着，2.在已选好省市区的情况下修改地址）
需要完整的json 可以点击下载

1.选择省市区(可直接运行)

===============选择省市区（复制运行）=================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于JSON级联查询地区</title>
<script type="text/javascript">
var country=[{"id":1,"parentId":0,"name":"中国","type":0}];
var p=[{"id":2,"parentId":1,"name":"北京市","type":1},{"id":3,"parentId":1,"name":"安徽省","type":1}];
var c=[{"id":37,"parentId":3,"name":"蚌埠","type":2},{"id":38,"parentId":2,"name":"北京","type":2}];
var a=[{"id":398,"parentId":37,"name":"迎江区","type":3},{"id":399,"parentId":38,"name":"西城","type":3}];	
window.οnlοad=function(){
var province=document.getElementById("province");
 for(temp in p){
	province.add(new Option(p[temp].name,p[temp].id));
	}
}
function setCity(){
var city=document.getElementById("city");
var area=document.getElementById("area");
var val=document.getElementById("province").value;
city.length=1;
area.length=1;
for(temp in c){
 if(parseInt(c[temp].parentId) == parseInt(val) ){
	city.add(new Option(c[temp].name,c[temp].id));
	}	
}   
}
function setArea(){
var area=document.getElementById("area");
var val=document.getElementById("city").value;
area.length=1;
for(temp in a){
 if(parseInt(a[temp].parentId) == parseInt(val) ){
		area.add(new Option(a[temp].name,a[temp].id));
	}	
}  
}
</script>
</head>
<body>
<select id="province" onChange="setCity()">
   <option value="">--选择省会--</option>
</select>
<select id="city" onChange="setArea()">
   <option value="">--选择城市--</option>
</select>
<select id="area">
   <option value="">--选择区域--</option>
</select>
</body>
</html>

=======================修改选择地区（复制运行）=======================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于JSON级联修改地区</title>
<script type="text/javascript">
var country=[{"id":1,"parentId":0,"name":"中国","type":0}];
var p=[{"id":2,"parentId":1,"name":"北京市","type":1},{"id":3,"parentId":1,"name":"安徽省","type":1}];
var c=[{"id":37,"parentId":3,"name":"蚌埠","type":2},{"id":38,"parentId":2,"name":"北京","type":2}];
var a=[{"id":398,"parentId":37,"name":"迎江区","type":3},{"id":399,"parentId":38,"name":"西城","type":3}];	
window.οnlοad=function(){
var province=document.getElementById("province");
var city=document.getElementById("city");
var area=document.getElementById("area");
var ps=document.getElementById("province").value;
var cs=document.getElementById("city").value;
var as=document.getElementById("area").value;
for(temp in p){
 if(ps!=p[temp].id){
	province.add(new Option(p[temp].name,p[temp].id));
	}
}
for(temp in c){
 if(cs!=c[temp].id && c[temp].parentId==ps){
	city.add(new Option(c[temp].name,c[temp].id));
	}
}  
for(temp in a){
 if(as!=a[temp].id && a[temp].parentId==cs){
	area.add(new Option(a[temp].name,a[temp].id));
	}
} 			
}
function setCity(){
var city=document.getElementById("city");
var area=document.getElementById("area");
var val=document.getElementById("province").value;
city.length=1;
area.length=1;
var  index=city.selectedIndex;
var  indexarea=area.selectedIndex;
city.options.remove(index);
area.options.remove(indexarea);
city.add(new Option("--选择城市--",""));
area.add(new Option("--选择区域--",""));
for(temp in c){
 if(parseInt(c[temp].parentId) == parseInt(val) ){
	city.add(new Option(c[temp].name,c[temp].id));
 }	
}   
}
		
function setArea(){
var area=document.getElementById("area");
var val=document.getElementById("city").value;
area.length=1;
var  indexarea=area.selectedIndex;
area.options.remove(indexarea);
area.add(new Option("--选择区域--",""));
for(temp in a){
 if(parseInt(a[temp].parentId) == parseInt(val) ){
	area.add(new Option(a[temp].name,a[temp].id));
	}	
}  
}
</script>
</head>
<body>
<select id="province" onChange="setCity()">
   <option value="3">安徽省</option>
</select>
<select id="city" onChange="setArea()">
   <option value="44">黄山</option>
</select>
<select id="area">
  <option value="457">徽州区</option>
</select>
</body>
</html>