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

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

解决方案 »

  1.   

    懒得下、先查省，ajax传值，选择后再left join市，同理查县
      

  2.   

    不能ajax 查询，这个是不用存数据库的，
      

  3.   

    php有操作json文件的函数，就像php操作xml文件那样，这就把json文件数据，导入到php类似于数组中了！
      

  4.   

    那样的json 我用php_json无法获取解析。
      

  5.   

    json_encode   json_decode
      

  6.   

    可能效率不高，但可以用，楼主参考一下.
    <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>
      

  7.   

    请问，为何选择一级分类的时候会说getListOne is not defined 我运行不下去。
      

  8.   

    建议ajax吧，js的三级联动网上也到处都是，但省、市、县的数据过于庞大，一次加载会导致用户浏览器速度缓慢，甚至崩溃！
      

  9.   

    json说白了，就是javascript的字典,{'name':'value'}的形式，或者说把php的数组换了个样子而已。为什么要用json？因为json在浏览器上可以直接被javascript运行成javascript对象，方便使用，仅此而已。
      

  10.   

    我用chrome浏览器测试的是可以，没想到在ie和firefox下不行，囧
      

  11.   

    我猜测的一个原因,重新写了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;
        }
      

  12.   

    <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> 
    给你参考下
      

  13.   


    <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>  复制多了，是这么多的。