求：省市县 json 数据怎么解析 成下拉框并且联动的。

binglingxiaolingling 2011-08-25 09:19:46
今天碰到这样的json数据不是标准的需要解析成省市县的下拉框，
点击一级城市北京相应的出现二级城市海淀区，点击河北省，出现二级石家庄市 点击石家庄，出现三级县级怎么实现呢？
由于json数据的长度太长，所有我这里没有办法只能在资源里面存储着，有意者请下载，

下载地址：http://download.csdn.net/source/3546734
...全文
473 14 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
码无边 2011-08-26
  • 打赏
  • 举报
 回复 


<script type="text/javascript">

var R='<{$zoneinfo->RID}>';//区域ID

var P='<{$zoneinfo->PID}>';//省份ID

var C='<{$zoneinfo->CID}>';//城市ID

var D='<{$zoneinfo->ID}>';//区县ID

if(R=="")

	R=0;

 $(document).ready(function(){	

		/*------联动R->P-------*/

 		$('#RID').val(R).change(function(){

 			//alert(R);

 			var RID=$('#RID').val();

	 		if(RID>0){

	 			getString1('/?p=ContactInfo&action=DropDown_Province&RID='+RID,'','获取错误！');

	 		}		

 		}).change();

 		/*------联动P->C-------*/

 		$('#PID').change(function(){

 			var PID=$('#PID').val();

	 		if(PID>0){

	 			getString2('/?p=ContactInfo&action=DropDown_City&PID='+PID,'','获取错误！');

	 		}		

 		}).change();

 		/*------联动C->D-------*/

 		$('#CID').val(C).change(function(){

 			var CID=$('#CID').val();

	 		if(CID>0){

	 			getString3('/?p=ContactInfo&action=DropDown_District&CID='+CID,'','获取错误！');

	 		}		

 		}).change();		

  });

 var getString1=function(ajaxUrl,ajaxType,errorMessage){

		ajaxType=ajaxType==''?'get':ajaxType;

		$.ajax({

			type: ajaxType,

			url: ajaxUrl,

			success: function(data){

				$("#PID").empty();

				$(data).appendTo("#PID");

				$('#PID').val(P).change();

			},

			error: function(){

				if(errorMessage!=''){

				}

			}

		});	

 	}

 	var getString2=function(ajaxUrl,ajaxType,errorMessage){

		ajaxType=ajaxType==''?'get':ajaxType;

		$.ajax({

			type: ajaxType,

			url: ajaxUrl,

			success: function(data){

				$("#CID").empty();

				$(data).appendTo("#CID");

				$('#CID').val(C).change();

			},

			error: function(){

				if(errorMessage!=''){

				}

			}

		});	

 	}

 var getString3=function(ajaxUrl,ajaxType,errorMessage){

		ajaxType=ajaxType==''?'get':ajaxType;

		$.ajax({

			type: ajaxType,

			url: ajaxUrl,

			success: function(data){

				$("#DID").empty();

				$(data).appendTo("#DID");

				$('#DID').val(D).change();

			},

			error: function(){

				if(errorMessage!=''){

				}

			}

		});	

 	};



</script> 		复制多了，是这么多的。
码无边 2011-08-26
  • 打赏
  • 举报
 回复 




<script type="text/javascript">

var R='<{$zoneinfo->RID}>';//区域ID

var P='<{$zoneinfo->PID}>';//省份ID

var C='<{$zoneinfo->CID}>';//城市ID

var D='<{$zoneinfo->ID}>';//区县ID

if(R=="")

	R=0;

 $(document).ready(function(){	

		/*------联动R->P-------*/

 		$('#RID').val(R).change(function(){

 			//alert(R);

 			var RID=$('#RID').val();

	 		if(RID>0){

	 			getString1('/?p=ContactInfo&action=DropDown_Province&RID='+RID,'','获取错误！');

	 		}		

 		}).change();

 		/*------联动P->C-------*/

 		$('#PID').change(function(){

 			var PID=$('#PID').val();

	 		if(PID>0){

	 			getString2('/?p=ContactInfo&action=DropDown_City&PID='+PID,'','获取错误！');

	 		}		

 		}).change();

 		/*------联动C->D-------*/

 		$('#CID').val(C).change(function(){

 			var CID=$('#CID').val();

	 		if(CID>0){

	 			getString3('/?p=ContactInfo&action=DropDown_District&CID='+CID,'','获取错误！');

	 		}		

 		}).change();		

  });

 var getString1=function(ajaxUrl,ajaxType,errorMessage){

		ajaxType=ajaxType==''?'get':ajaxType;

		$.ajax({

			type: ajaxType,

			url: ajaxUrl,

			success: function(data){

				$("#PID").empty();

				$(data).appendTo("#PID");

				$('#PID').val(P).change();

			},

			error: function(){

				if(errorMessage!=''){

				}

			}

		});	

 	}

 	var getString2=function(ajaxUrl,ajaxType,errorMessage){

		ajaxType=ajaxType==''?'get':ajaxType;

		$.ajax({

			type: ajaxType,

			url: ajaxUrl,

			success: function(data){

				$("#CID").empty();

				$(data).appendTo("#CID");

				$('#CID').val(C).change();

			},

			error: function(){

				if(errorMessage!=''){

				}

			}

		});	

 	}

 var getString3=function(ajaxUrl,ajaxType,errorMessage){

		ajaxType=ajaxType==''?'get':ajaxType;

		$.ajax({

			type: ajaxType,

			url: ajaxUrl,

			success: function(data){

				$("#DID").empty();

				$(data).appendTo("#DID");

				$('#DID').val(D).change();

			},

			error: function(){

				if(errorMessage!=''){

				}

			}

		});	

 	};

var t=null;	

var save=function(o){

	$("#loading").html('正在保存..');

	var x=$('#saveContact_'+o).offset().left-15;

	var y=$('#saveContact_'+o).offset().top-10;

	$("#divMsg").css({display:'block',"left":x+'px',"top":y+'px'});

	var corpid='<{$corpid}>';

	var contactid=$("input[name='ContactID["+o+"]']").val();	

	var psnamea=$("input[name='psnamea["+o+"]']").val();

	var psgendera=$("select[name='psgendera["+o+"]']").val();

	var psagea=$("input[name='psagea["+o+"]']").val();

	var ctbirthday=$("input[name='ctbirthday["+o+"]']").val();

	var psrolea=$("select[name='psrolea["+o+"]']").val();

	var pspositiona=$("input[name='pspositiona["+o+"]']").val();

	var mobile=$("input[name='mobile["+o+"]']").val();

	var email1=$("input[name='email1["+o+"]']").val();

	var psdetaila=$("input[name='psdetaila["+o+"]']").val();

	var psadra=$("input[name='psadra["+o+"]']").val();

	var cttel=$("input[name='cttel["+o+"]']").val();

	//var defaultprint=$("input[name='isprintisprint["+o+"]']").val();DefaultPrint:defaultprint,

	var lastmodify='<{$uid}>';

	var url = "/?p=ContactInfo&action=UpdatePs";

	//alert(defaultprint);

	url += "&datetime=" + new Date().getTime();

	$.post(url,{Action:"POST",Modify_UserID:lastmodify,ContactID:contactid,CorpID:corpid,CtName:psnamea,PsSex:psgendera,CtAge:psagea,CtBirthday:ctbirthday,CtPosition:psrolea,PositionDetail:pspositiona,CtMobile:mobile,PsEmail:email1,CtDetail:psdetaila,CtAdr:psadra,CtTel:cttel},function(data,text){

			$("#loading").html(data);			

			t=setTimeout('clearMsg()',1000);

			//alert(data);

		},"text"); 

};



var clearMsg=function(){

	$("#divMsg").css({display:'none'});

	clearTimeout(t);

};	



var saveprint=function(o){

	$("#loading").html('正在保存..');

	var x=$('#saveprint'+o).offset().left-15;

	var y=$('#saveprint'+o).offset().top-10;

	$("#divMsg").css({display:'block',"left":x+'px',"top":y+'px'});

	var corpid='<{$corpid}>';

	var contactid=$("input[name='ContactID["+o+"]']").val();

	var defaultprint=1;

	var lastmodify='<{$uid}>';

	//alert(defaultprint);

	var url = "/?p=ContactInfo&action=saveprint";

	url += "&datetime=" +new Date().getTime();

	

	$.post(url,{Action:"POST",Modify_UserID:lastmodify,ContactID:contactid,DefaultPrint:defaultprint,CorpID:corpid},function(data,text){

		$("#loading").html(data);

		t=setTimeout('clearMsg()',1000);

	},"text");

};

</script>


给你参考下
binglingxiaolingling 2011-08-25
  • 打赏
  • 举报
 回复
那样的json 我用php_json无法获取解析。
zijian85 2011-08-25
  • 打赏
  • 举报
 回复
php有操作json文件的函数，就像php操作xml文件那样，这就把json文件数据，导入到php类似于数组中了！
binglingxiaolingling 2011-08-25
  • 打赏
  • 举报
 回复
不能ajax 查询，这个是不用存数据库的，
calky 2011-08-25
  • 打赏
  • 举报
 回复
懒得下、先查省，ajax传值，选择后再left join市，同理查县
tangcdsn 2011-08-25
  • 打赏
  • 举报
 回复
我猜测的一个原因,重新写了init(),在ie下可以,其他浏览器在家里没安装测不了,楼主试下
//每次document.write都会重新刷新一次Header，使json.txt中的变量消失，报undefined错

    function init(){

		str="省:<select onchange=\"javascript:getListOne();\" id=\"province\" name=\"province\">";

        str+="<option value=\"\">----请选择----</option>";

        for(var i=0;i<html.length;i++){

			str+="<option value="+html[i].value+">"+html[i].name+"</option>";

        }

        str+="</select>";

        str+='市:<select onchange="javascript:getListTwo();" id="town" name="town">';

        str+='<option value="">----请选择----</option></select>';

        str+='县:<select id="county" name="county">';

        str+='<option value="">----请选择----</option></select>';

		document.body.innerHTML=str;

    }
tangcdsn 2011-08-25
  • 打赏
  • 举报
 回复
我用chrome浏览器测试的是可以，没想到在ie和firefox下不行，囧
Jnthts 2011-08-25
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 peng905 的回复:]

json有点不太懂！
[/Quote]
json说白了，就是javascript的字典,{'name':'value'}的形式，或者说把php的数组换了个样子而已。为什么要用json？因为json在浏览器上可以直接被javascript运行成javascript对象，方便使用，仅此而已。
微醺-BW 2011-08-25
  • 打赏
  • 举报
 回复
json有点不太懂！
木目子 2011-08-25
  • 打赏
  • 举报
 回复
建议ajax吧，js的三级联动网上也到处都是，但省、市、县的数据过于庞大，一次加载会导致用户浏览器速度缓慢，甚至崩溃！
binglingxiaolingling 2011-08-25
  • 打赏
  • 举报
 回复
请问，为何选择一级分类的时候会说getListOne is not defined 我运行不下去。
tangcdsn 2011-08-25
  • 打赏
  • 举报
 回复
可能效率不高，但可以用，楼主参考一下.
<html>

<head>

<script language="javascript" src="json.txt"></script>

<script type="text/javascript">

	//var html=[{c:[{c:[{name:"县",value:"000000"}],name:"市",value:"0000"}],name:"省",value:"00"},{c:[{c:[{name:"北京",value:"010100"},{name:"海淀",value:"010200"},{name:"朝阳",value:"010300"},{name:"顺义",value:"010400"},{name:"怀柔",value:"010500"},{name:"通州",value:"010600"},{name:"昌平",value:"010700"},{name:"延庆",value:"010800"},{name:"丰台",value:"010900"},{name:"石景山",value:"011000"},{name:"大兴",value:"011100"},{name:"房山",value:"011200"},{name:"密云",value:"011300"},{name:"门头沟",value:"011400"},{name:"平谷",value:"011500"},{name:"八达岭",value:"011600"},{name:"佛爷顶",value:"011700"},{name:"汤河口",value:"011800"},{name:"密云上甸子",value:"011900"},{name:"斋堂",value:"012000"},{name:"霞云岭",value:"012100"}],name:"北京",value:"0101"}],name:"北京",value:"01"},{c:[{c:[{name:"上海",value:"020100"},{name:"闵行",value:"020200"},{name:"宝山",value:"020300"},{name:"川沙",value:"020400"},{name:"嘉定",value:"020500"},{name:"南汇",value:"020600"},{name:"金山",value:"020700"},{name:"青浦",value:"020800"},{name:"松江",value:"020900"},{name:"奉贤",value:"021000"},{name:"崇明",value:"021100"},{name:"陈家镇",value:"021200"},{name:"引水船",value:"021300"}],name:"上海",value:"0201"}],name:"上海",value:"02"}];

	function init(){

		document.write('省:<select onchange="getListOne();" id="province">');

		document.write('<option value="">----请选择----</option>');

		for(var i=0;i<html.length;i++){

			document.write('<option value='+html[i].value+'>'+html[i].name+'</option>');

		}

		document.write('</select>');

		document.write('市:<select onchange="getListTwo();" id="town">');

		document.write('<option value="">----请选择----</option></select>');

		document.write('县:<select id="county">');

		document.write('<option value="">----请选择----</option></select>');

	}

	function getListOne(){

		var value=document.getElementById('province').value;

		if(document.getElementById('town')!=null){

			document.getElementById('town').length=1;//清空select,保留第一条

		}

		if(value!=""){

			for(var i=0;i<html.length;i++){

				if(html[i].value==value){

					for(var j=0;j<html[i].c.length;j++){

						var option=document.createElement('option');

						option.value=html[i].c[j].value;

						option.text=html[i].c[j].name;

						document.getElementById('town').options.add(option);

						//document.write('<option value='+html[i].c[j].value+'>'+html[i].c[j].name+'</option>');

					}

				}

			}

		}

	}

	function getListTwo(){

		var value=document.getElementById('town').value;

		if(document.getElementById('county')!=null){

			document.getElementById('county').length=1;//清空select,保留第一条

		}

		if(value!=""){

			for(var i=0;i<html.length;i++){

				for(var j=0;j<html[i].c.length;j++){

					if(html[i].c[j].value==value){

						for(var k=0;k<html[i].c[j].c.length;k++){

							var option=document.createElement('option');

							option.value=html[i].c[j].c[k].value;

							option.text=html[i].c[j].c[k].name;

							document.getElementById('county').options.add(option);

						}

					}

				}

			}

		}

	}

</script>

</head>

<body onload="init();">

</body>

</html>
zhaoshengyang 2011-08-25
  • 打赏
  • 举报
 回复
json_encode json_decode
三级联动的省市县的json数据
三级联动的省市县的json数据 点击一级城市北京相应的出现二级城市海淀区，点击河北省，出现二级石家庄市 点击石家庄，出现三级县级怎么实现呢？
全国省市区三级联动json数据
2017最新json数据省市区，今天本人刚用过，欢迎各位朋友一起
省市区街道4级联动.json纯json文件，下载可用，用于前端下拉选择组件
省市区街道4级联动.json 纯json文件，下载可用，用于前端下拉选择组件的数据组装， 这是 省-市-区-街道 4级的数据。
layui-省市县三级联动下拉框-HTML源码
中国的省市县三级联动下拉框html+js源码，看懂后也可以扩展成四级五级联动
json实现三级联动下拉框---struts版（数据来自mysql数据库）
json实现省市县三级联动下拉框，从数据库读取数据到页面显示！
基础编程

21,893

社区成员

140,347

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章