21,889
社区成员
发帖
与我相关
我的任务
分享求：省市县 json 数据怎么解析 成下拉框并且联动的。
今天碰到这样的json数据不是标准的需要解析成省市县的下拉框，
点击一级城市北京相应的出现二级城市海淀区，点击河北省，出现二级石家庄市 点击石家庄，出现三级县级怎么实现呢？
由于json数据的长度太长，所有我这里没有办法只能在资源里面存储着，有意者请下载，
下载地址：http://download.csdn.net/source/3546734
点击一级城市北京相应的出现二级城市海淀区，点击河北省，出现二级石家庄市 点击石家庄，出现三级县级怎么实现呢？
由于json数据的长度太长，所有我这里没有办法只能在资源里面存储着，有意者请下载，
下载地址：http://download.csdn.net/source/3546734
...全文
请发表友善的回复…
发表回复
码无边 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对象，方便使用，仅此而已。
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
