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

来源：互联网发布：java junit4 编辑：程序博客网时间：2024/05/01 00:31

基于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.onload=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.onload=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>

阅读全文

1 0

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

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