简书 php三级联动,三级联动

昨天项目需要一个三级联动，自己就动手写了一个

var index=0;

var arrJson={

"arr1":[

{"id":"1904a7ce91804826b8574f6298c3e2b0","parentIds":"0,","name":"行政管理","sort":30,"hasChildren":false,"state":"01","parentId":"0"},

{"id":"9706a96d96a64518be1b4a4582bbd38f","parentIds":"0,","name":"请问前往","sort":30,"hasChildren":false,"state":"1231","parentId":"0"},

{"id":"c4daa821b64a4d5c8f9bb9c90508c85c","parentIds":"0,","name":"123","sort":30,"hasChildren":false,"state":"123","parentId":"0"}

],

"arr2":[

{"id":"125ef074ff3941f9bae4f67eec4e40f5","parentIds":"0,c4daa821b64a4d5c8f9bb9c90508c85c,","name":"请问","sort":30,"hasChildren":false,"state":"驱蚊器","parentId":"c4daa821b64a4d5c8f9bb9c90508c85c"},

{"id":"880c2c435e5d4437ba7be0b38d390d07","parentIds":"0,1904a7ce91804826b8574f6298c3e2b0,","name":"2018","sort":30,"hasChildren":false,"state":"2018","parentId":"1904a7ce91804826b8574f6298c3e2b0"},

{"id":"a9eb43bfb5234575964618b847787711","parentIds":"0,9706a96d96a64518be1b4a4582bbd38f,","name":"企鹅企鹅","sort":30,"hasChildren":false,"state":"1231","parentId":"9706a96d96a64518be1b4a4582bbd38f"}

],

"arr3":[

{"id":"2fe43635f5f5401c8781e94320bf533e","parentIds":"0,c4daa821b64a4d5c8f9bb9c90508c85c,125ef074ff3941f9bae4f67eec4e40f5,","name":"送达","sort":30,"hasChildren":false,"state":"驱蚊器","parentId":"125ef074ff3941f9bae4f67eec4e40f5"},

{"id":"5c29156c15a04c4085d42bb986c8af09","parentIds":"0,1904a7ce91804826b8574f6298c3e2b0,880c2c435e5d4437ba7be0b38d390d07,","name":"法纪检察","sort":30,"hasChildren":false,"state":"1","parentId":"880c2c435e5d4437ba7be0b38d390d07"}

]

}

var html1='';

$.each(arrJson.arr1,function(i,n){

html1+='

'+n.name+'

';

})

$('.linkageList').eq(0).append(html1);

$(document).on('click','.linkageTop li',function(){

index=$('.linkageTop li').index($(this));

if(index == 0){

$('.linkageList').eq(1).remove().end().eq(2).remove();

}else if(index == 1){

$('.linkageList').eq(2).remove();

}

if($(this).hasClass('active')){

$(this).removeClass('active').siblings().removeClass('active');

}else{

$(this).addClass('active').siblings().removeClass('active');

}

}).on('click','.lListLi',function(e){

e?e.stopPropagation():event.cancelBubble = true;

$(this).parents('li').attr('id',$(this).attr('id')).find('span').text($(this).text())

if(index == 0){

index++;

$('.linkageTop li span').eq(1).text('二级联动').end().eq(2).text('三级联动');

$('.linkageTop li').eq(1).addClass('active').siblings().removeClass('active');

var htmls='

';

var ids = $('.linkageTop li').eq(0).attr('id');

$.each(arrJson.arr2,function(i,n){

var parentIds=n.parentIds.split(',')

if(ids == parentIds[1]){

htmls +='

'+n.name+'

';

}

})

htmls +='

';

$('.linkageTop li').eq(1).append(htmls);

}else if(index == 1){

index++;

$('.linkageTop li span').eq(2).text('三级联动');

$('.linkageTop li').eq(2).addClass('active').siblings().removeClass('active');

var htmls='

';

var ids = $('.linkageTop li').eq(0).attr('id');

var idss = $('.linkageTop li').eq(1).attr('id');

$.each(arrJson.arr3,function(i,n){

var parentIds=n.parentIds.split(',')

if(ids == parentIds[1] && idss == parentIds[2]){

htmls +='

'+n.name+'

';

}

})

htmls +='

';

$('.linkageTop li').eq(2).append(htmls);

}else if(index ==2){

$('.linkageTop li').removeClass('active').eq(2).find('span').attr('id',$(this).attr('id'));

}

})