原生javaScript+jquery实现四级联动。
html 代码结构：
json数据模式，模拟数据：
{
"status": "success",
"results": [
{
"guan": "管理1",
"index": [
{
"pin": "品牌商1",
"dataPin": [
{
"daili":"代理1asdas",
"shopData":[
{
"shop":[
"shop2",
"shop"
]
}
]
},
{
"daili":"代理2asdasd",
"shopData":[
{
"shop":[
"shop2asdas",
"shopsadas"
]
}
]
}
]
},
{
"pin": "品牌商2",
"dataPin": [
{
"daili":"代理1",
"shopData":[
{
"shop":[
"shop2",
"shop"
]
}
]
},
{
"daili":"代理2",
"shopData":[
{
"shop":[
"shop2",
"shop"
]
}
]
}
]
}
]
},
{
"guan": "管理2",
"index": [
{
"pin": "品牌商1aasda",
"dataPin": [
{
"daili":"代理1asdsd",
"shopData":[
{
"shop":[
"shop2asda",
"shopasd"
]
}
]
},
{
"daili":"代理2asda",
"shopData":[
{
"shop":[
"shop2312",
"shopgf"
]
}
]
}
]
},
{
"pin": "品牌商2asdas",
"dataPin": [
{
"daili":"代理1",
"shopData":[
{
"shop":[
"shop2hjhg",
"shop456"
]
}
]
},
{
"daili":"代理2",
"shopData":[
{
"shop":[
"shop2xiao",
"shophai"
]
}
]
}
]
}
]
}
]
}
js代码结构：
window.οnlοad=function(){
$.ajax({
type:"get",
url:"data.json",
data:{},
dataType:"json",
success:function(data){
//调用管理
guan(data)
pin(data.results[0].index)
dali(data.results[0].index[0].dataPin)
shopHome(data.results[0].index[0].dataPin[0].shopData)
},
error:function(e){
console.log(e)
}
});
}
/**
* 管理方法
* */
var guanli_canshu1=null//
function guan(data){
for(var i=0;i
$(".section-id-one").append(guanl)
}
guanli_canshu1=data.results;
}
/**
*品牌商方法
* */
var pin_chanshu=null;
function pin(data){
for(var i=0;i
$(".section-id-one_pin").append(shopPin)
}
pin_chanshu=data;
console.log("品牌商："+data)
}
/**
* 代理方法
* */
var dai_canshu=null;
function dali(data){
console.log($(".section-id-one_pin"))
for(var i=0;i
$(".section-id-one_daili").append(shopPin)
}
dai_canshu=data;
}
/**
* 商家方法
* */
function shopHome(data){
console.log(data.length)
console.log($(".section-id-one_pin"))
for(var i=0;i
for(var j=0;j
var shopPin='
$(".section-id-one_shop").append(shopPin)
}
}
}
//点击方法
$(".top-li").click(function(){
// $(this).siblings("ul").css('display','block')
$(this).siblings("ul").slideToggle();
console.log($(this).siblings("ul").find("li").attr("type"))
if($(this).siblings("ul").find("li").attr("type")=="guan"){
$(this).siblings("ul").find("li").click(function(){
$(".section-id-one_pin").html("");
console.log($(this).attr("name"))
pin(guanli_canshu1[$(this).attr("name")].index)
})
}
if($(this).siblings("ul").find("li").attr("type")=="pin"){
$(this).siblings("ul").on("click","li",function(){
alert(2)
$(".section-id-one_daili").html("");
console.log($(this).attr("name"))
console.log(pin_chanshu[$(this).attr("name")])
dali(pin_chanshu[$(this).attr("name")].dataPin)
})
}
if($(this).siblings("ul").find("li").attr("type")=="dai"){
$(this).siblings("ul").on("click","li",function(){
console.log(1);
$(".section-id-one_shop").html("");
console.log($(this).attr("name"))
console.log(dai_canshu[1].shopData)
shopHome(dai_canshu[$(this).attr("name")].shopData)
})
}
})
页面实现效果：
