php+json+javascript实现三级联动

首先建立一个json字符串

[
{
"id": "1",
"info": [
{
"cat_id": "7",
"cat_name": "内饰用品",
"parentid": "1",
"infos": [
{
"cat_id": "40",
"cat_name": "装饰灯"
},
{
"cat_id": "42",
"cat_name": "儿童座椅"
},
{
"cat_id": "333",
"cat_name": "顶吧"
},
{
"cat_id": "334",
"cat_name": "行李架"
},
{
"cat_id": "335",
"cat_name": "平衡杆"
},
{
"cat_id": "336",
"cat_name": "前后护杠"
},
{
"cat_id": "337",
"cat_name": "胎玲"
},
{
"cat_id": "338",
"cat_name": "碳纤机"
},
{
"cat_id": "329",
"cat_name": "个性小贴"
},
{
"cat_id": "330",
"cat_name": "前档贴"
},
{
"cat_id": "331",
"cat_name": "整车套贴"
}
]
},
{
"cat_id": "27",
"cat_name": "功能用品",
"parentid": "3",
"infos": [
{
"cat_id": "309",
"cat_name": "车密封胶条"
},
{
"cat_id": "275",
"cat_name": "中控锁"
}
]
},
{
"cat_id": "29",
"cat_name": "GPS导航",
"parentid": "4",
"infos": [
{
"cat_id": "264",
"cat_name": "GPS"
}
]
},
{
"cat_id": "30",
"cat_name": "汽车电子",
"parentid": "4",
"infos": [
{
"cat_id": "270",
"cat_name": "防盗"
},
{
"cat_id": "272",
"cat_name": "空气净化器"
},
{
"cat_id": "276",
"cat_name": "安全防盗"
},
{
"cat_id": "277",
"cat_name": "笔记本适配器"
},
{
"cat_id": "278",
"cat_name": "电源分插器"
},
{
"cat_id": "279",
"cat_name": "警报器"
},
{
"cat_id": "280",
"cat_name": "逆变电源"
},
{
"cat_id": "282",
"cat_name": "手机车充"
}
]
},
{
"cat_id": "31",
"cat_name": "主机屏幕",
"parentid": "4",
"infos": [
{
"cat_id": "284",
"cat_name": "MP5"
},
{
"cat_id": "285",
"cat_name": "车载CD"
},
{
"cat_id": "286",
"cat_name": "车载MP3"
},
{
"cat_id": "287",
"cat_name": "车载电脑"
},
{
"cat_id": "288",

c5ad
"cat_name": "卡带机"
},
{
"cat_id": "229",
"cat_name": "安全警示牌"
}
]
},
{
"cat_id": "36",
"cat_name": "其他",
"parentid": "5",
"infos": [
{
"cat_id": "230",
"cat_name": "露营灯"
},
{
"cat_id": "235",
"cat_name": "维修灯"
}
]
}
]
},
{
"id": "6",
"info": [
{
"cat_id": "37",
"cat_name": "维修工具",
"parentid": "6",
"infos": [
{
"cat_id": "183",
"cat_name": "维修护垫"
},
{
"cat_id": "191",
"cat_name": "维修小工具"
}
]
},
{
"cat_id": "38",
"cat_name": "维修设备",
"parentid": "6",
"infos": [
{
"cat_id": "176",
"cat_name": "喷漆设备"
},
{
"cat_id": "177",
"cat_name": "油路清洗机"
},
{
"cat_id": "178",
"cat_name": "千斤顶"
},
{
"cat_id": "182",
"cat_name": "卧顶"
}
]
},
{
"cat_id": "39",
"cat_name": "汽车配件",
"parentid": "6",
"infos": [
{
"cat_id": "164",
"cat_name": "轮胎"
},
{
"cat_id": "165",
"cat_name": "火花塞"
},
{
"cat_id": "173",
"cat_name": "转向系"
},
{
"cat_id": "174",
"cat_name": "制动系"
},
{
"cat_id": "175",
"cat_name": "电力系"
}
]
}
]
}
]

前端HTML代码
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">如果没有关联不填即可</span>关联商品：</label>
<div class="formControls col-xs-8 col-sm-9 skin-minimal">
<select style="margin-right:15px;" name="template" id="sever">
<?php for($i=0;$i<count($arr);$i++){ if($i==0){?>
<option value=<?php echo '"'.$arr[$i]['cat_id'].'"'?> selected="selected" ><?php echo $arr[$i]['cat_name']?></option>
<?php }else{?>
<option value=<?php echo '"'.$arr[$i]['cat_id'].'"'?>><?php echo $arr[$i]['cat_name']?></option>
<?php }}?>
</select>

<select style="margin-right:15px;" name="template" id="mySelect">
myoption="<option class='aa' value='0'>请先选择</option>";
</select>

<select style="margin-right:15px;" name="template" id="mySelects">
myoption="<option class='bb' value='0'>请先选择</option>";
</select>

<span id="ovaule" class="c-red">*</span>

</div>
</div>

<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>关联商品：</label>
<div class="formControls col-xs-8 col-sm-9 skin-minimal" id='Fruits'>

</div>
</div>

javascript代码
var jsonobj={$lists};这句赋值的是第一次php返回的json格式字符串

<!-- 关联商品 -->
<script language="javascript" type="text/javascript">

//第一级联动----------------------------
$('#sever').change(function(){
var pnum=$(this).children('option:selected').val();
var jsonobj={$lists};
var num=jsonobj.length;
var myoption='';
for(var i=0;i<num;i++){
if(jsonobj[i]['id']==pnum){
for(var j=0;j<jsonobj[i]['info'].length;j++){
if(j==0){
myoption+="<option class='aa' selected='selected' value='"+jsonobj[i]['info'][j]['cat_id']+"'>"+jsonobj[i]['info'][j]['cat_name']+'</option>';
}else{
myoption+="<option class='aa' value='"+jsonobj[i]['info'][j]['cat_id']+"'>"+jsonobj[i]['info'][j]['cat_name']+'</option>';
}
}
if(jsonobj[i]['info'].length==0){
myoption="<option class='aa' selected='selected' value='0'>暂无该分类</option>";
}
break;
}
}
var text=$(this).children('option:selected').text();
$("#ovaule").html(text);
$(".aa").remove();
$(myoption).appendTo("#mySelect");

var uid=pnum;
$.post("add_usersever/uid/"+uid, function(data) {
var info=eval(data);
var datainfo='';
for(var i=0;i<info.length;i++){
datainfo+='<label class="cc"><input name="Fruit[]" type="checkbox" value="'+info[i]['goods_id']+'" />'+info[i]['goods_name']+'</br></label>';
}

$(".cc").remove();
$(datainfo).appendTo("#Fruits");
});

})

//第二级联动----------------------------
$('#mySelect').change(function(){
var pnum=$(this).children('option:selected').val();
var jsonobj={$lists};
var num=jsonobj.length;
var myoption='';
var text=$(this).children('option:selected').text();
$("#ovaule").html(text);
for(var i=0;i<num;i++){
for(var j=0;j<jsonobj[i]['info'].length;j++){
if(jsonobj[i]['info'][j]['cat_id']==pnum){
for(var k=0;k<jsonobj[i]['info'][j]['infos'].length;k++){
var id=jsonobj[i]['info'][j]['infos'][k]['cat_id'];
var name=jsonobj[i]['info'][j]['infos'][k]['cat_name'];
if(k==0){
var uid=id;
myoption+="<option class='bb' selected='selected' value='"+id+"'>"+name+'</option>';
}else{
myoption+="<option class='bb' value='"+id+"'>"+name+'</option>';
}
}
break;
}
}
}
// alert(uid);//获取到最后一层选择的id
$(".bb").remove();
$(myoption).appendTo("#mySelects");

var uid=pnum;
$.post("add_usersever/uid/"+uid, function(data) {
var info=eval(data);
var datainfo='';
for(var i=0;i<info.length;i++){
datainfo+='<label class="cc"><input name="Fruit[]" type="checkbox" value="'+info[i]['goods_id']+'" />'+info[i]['goods_name']+'</br></label>';
}

$(".cc").remove();
$(datainfo).appendTo("#Fruits");
});

})

//第三级联动----------------------------
$('#mySelects').change(function(){
var text=$(this).children('option:selected').text();
$("#ovaule").html(text);
var pnum=$(this).children('option:selected').val();
$.post("add_usersever/uid/"+pnum, function(data) {
if(data!='[]'){
var info=eval(data[0]['goods_id'])
// alert(data);
}
});

var uid=pnum;
$.post("add_usersever/uid/"+uid, function(data) {
var info=eval(data);
var datainfo='';
for(var i=0;i<info.length;i++){
datainfo+='<label class="cc"><input name="Fruit[]" type="checkbox" value="'+info[i]['goods_id']+'" />'+info[i]['goods_name']+'</br></label>';
}

$(".cc").remove();
$(datainfo).appendTo("#Fruits");
});

})
</script>