Jquery三级联动和$.each()及.on()用法

效果如下:

 模拟数据:

//模拟数据
let dataArr = [
  {
  "户外媒体":[
    {"户外媒体A-A": ["户外单立柱", "户外灯箱", "户外跨桥", "户外墙体广告", "户外楼顶广告"]},
    {"户外媒体A-B": ["单立柱B", "灯箱B", "跨桥", "墙体广告", "楼顶广告"]},
    {"户外媒体A-C": ["单立柱C", "灯箱", "跨桥", "墙体广告", "楼顶广告"] },
    {"户外媒体A-D":["单立柱D","灯箱D","跨桥D","墙体广告","楼顶广告"]}
    ]
  },{
  "交通媒体":[
    {"交通媒体A-A": ["交通单立柱", "交通灯箱", "交通跨桥", "交通墙体广告", "交通楼顶广告"]},
    {"交通媒体A-B": ["单立柱B", "灯箱B", "跨桥", "墙体广告", "楼顶广告"]},
    {"交通媒体A-C": ["单立柱C", "灯箱", "跨桥", "墙体广告", "楼顶广告"]},
    {"交通媒体-D":["单立柱D","灯箱D","跨桥D","墙体广告","楼顶广告"]}
   ]
  },{
  "社交媒体":[
    {"社交媒体A-A":["社交单立柱","社交灯箱","社交跨桥","社交墙体广告","社交楼顶广告"]},
    {"社交媒体A-B": ["单立柱B", "灯箱B", "跨桥", "墙体广告", "楼顶广告"]},
    {"社交媒体A-C": ["单立柱C", "灯箱", "跨桥", "墙体广告", "楼顶广告"]},
    {"社交媒体A-D": ["单立柱D", "灯箱D", "跨桥D", "墙体广告", "楼顶广告"]}
    ]
  },{
  "商圈媒体":[
    {"商圈媒体A-A":["商圈单立柱","商圈灯箱","商圈跨桥","商圈墙体广告","商圈楼顶广告"]},
    {"商圈媒体A-B":["单立柱B","灯箱B","跨桥","墙体广告","楼顶广告"]},
    {"商圈媒体A-C":["单立柱C","灯箱","跨桥","墙体广告","楼顶广告"]},
    {"商圈媒体A-D":["单立柱D","灯箱D","跨桥D","墙体广告","楼顶广告"]}
    ]
  },{
  "其他媒体":[
    {"其他媒体A-A": ["其他单立柱", "其他灯箱", "其他跨桥", "其他墙体广告", "其他楼顶广告"]},
    {"其他媒体A-B": ["单立柱B", "灯箱B", "跨桥", "墙体广告", "楼顶广告"]},
    {"其他媒体A-C": ["单立柱C", "灯箱", "跨桥", "墙体广告", "楼顶广告"]},
    {"其他媒体A-D": ["单立柱D", "灯箱D", "跨桥D", "墙体广告", "楼顶广告"]}
    ]
  },{
  "国外媒体":[
    {"国外媒体-A":["单立柱","灯箱","跨桥","墙体广告","楼顶广告"]},
    {"国外媒体C-B":["单立柱C","灯箱B","跨桥","墙体广告","楼顶广告"]},
    {"媒国外媒体C-C":["单国外媒体C","灯箱","跨桥","墙体广告","楼顶广告"]},
    {"媒国外媒体类C-D":["单立柱D","灯箱D","跨桥D","墙体广告","楼顶广告"]}
    ]
  }
]

HTML结构:

<dl class="rowDl rowDlOne">
<dt>媒体类型</dt>
<dd>



</dd>
</dl>
<dl class="rowDl rowDlTwo">
<dt>媒体种类</dt>
<dd>



</dd>
</dl>
<dl class="rowDl rowDlThree">
<dt>媒体形式</dt>
<dd>



</dd>
</dl>

JS:

//数据渲染
let levelOne = ""; //一级默认文字
let levelTwo = "" //二级默认文字
let indexOneNum = 0 //默认下标
$.each(dataArr, function(i,val) {
  $.each(val,function(key){
    let LevelTxt = key
    let Level ="<span>"+LevelTxt+"</span>";
    $(".rowDlOne dd").append(Level);
  })
})
levelOne = $(".rowDlOne dd").find("span").first().text();
$.each(dataArr[0][levelOne], function(x,val) {
  $.each(val,function(key){
    let LevelTxt = key
    let Level ="<span>"+LevelTxt+"</span>";
    $(".rowDlTwo dd").append(Level);
  })
})
levelTwo = $(".rowDlTwo dd").find("span").first().text();
$.each(dataArr[0][levelOne][0][levelTwo], function(x,val) {
  let LevelTxt = val
  let Level ="<span>"+LevelTxt+"</span>";
  $(".rowDlThree dd").append(Level);
})

//更新二级
$(".rowDlOne dd span").click(function(){
  $(this).addClass("hover");
  $(this).siblings().removeClass("hover")
  levelOne = $(this).text();
  indexOneNum =  $(this).index()
  $(".rowDlTwo dd").empty()
  //console.log(dataArr[indexOneNum][levelOne][0])
  $.each(dataArr[indexOneNum][levelOne], function(x,val) {
    $.each(val,function(key){
      let LevelTxt = key
      let Level ="<span>"+LevelTxt+"</span>";
      $(".rowDlTwo dd").append(Level);
     })
  })
  //console.log($(".rowDlTwo dd").find("span").eq(0).text())
  levelTwo = $(".rowDlTwo dd").find("span").eq(0).text()
  $(".rowDlThree dd").empty()
  $.each(dataArr[indexOneNum][levelOne][0][levelTwo], function(x,val) {
    let LevelTxt = val
    let Level ="<span>"+LevelTxt+"</span>";
    $(".rowDlThree dd").append(Level);
  })
  return levelOne
  return indexOneNum
})

 //更新三级
$(".rowDlTwo dd").on("click","span",function(){
  $(this).addClass("hover");
  $(this).siblings().removeClass("hover")
  levelTwo = $(this).text();
  let indexTwoNum =  $(this).index()
  $(".rowDlThree dd").empty()
  $.each(dataArr[indexOneNum][levelOne][indexTwoNum][levelTwo], function(x,val) {
    let LevelTxt = val
    let Level ="<span>"+LevelTxt+"</span>";
    $(".rowDlThree dd").append(Level);
  })
});

//三级选中
$(".rowDlThree dd").on("click", "span", function () {
  $(this).addClass("hover");
  $(this).siblings().removeClass("hover")
})

字母对应省份城市:

 数据:

//省份数据
let provinceSort = [
{
  "A":[
    {"A1":["A1-1","A1-2","A1-3","A1-4"]},
    {"A2":["A2-1","A2-2","A2-3","A2-4"]},
    {"A3":["A3-1","A3-2","A3-3","A3-4"]},
  ]
},{
  "B":[
    {"B1":["B1-1","B1-2","B1-3","B1-4"]},
    {"B2":["B2-1","B2-2","B2-3","B2-4"]},
    {"B3":["B3-1","B3-2","B3-3","B3-4"]},
  ]
},{
  "C":[
    {"C1":["C1-1","C1-2","C1-3","C1-4"]},
    {"C2":["C2-1","C2-2","C2-3","C2-4"]},
    {"C3":["C3-1","C3-2","C3-3","C3-4"]},
  ]
},{
  "D":[
    {"D1":["D1-1","D1-2","D1-3","D1-4"]},
    {"D2":["D2-1","D2-2","D2-3","D2-4"]},
    {"D3":["D3-1","D3-2","D3-3","D3-4"]},
  ]
},{
  "E":[
    {"E1":["E1-1","E1-2","E1-3","E1-4"]},
    {"E2":["E2-1","E2-2","E2-3","E2-4"]},
    {"E3":["E3-1","E3-2","E3-3","E3-4"]},
  ]
},{
  "F":[
    {"F1":["F1-1","F1-2","F1-3","F1-4"]},
    {"F2":["F2-1","F2-2","F2-3","F2-4"]},
    {"F3":["F3-1","F3-2","F3-3","F3-4"]},
  ]
},{
  "G":[
    {"G1":["G1-1","G1-2","G1-3","G1-4"]},
    {"G2":["G2-1","G2-2","G2-3","G2-4"]},
    {"G3":["G3-1","G3-2","G3-3","G3-4"]},
  ]
},{
  "H":[
    {"H1":["H1-1","H1-2","H1-3","H1-4"]},
    {"H2":["H2-1","H2-2","H2-3","H2-4"]},
    {"H3":["H3-1","H3-2","H3-3","H3-4"]},
  ]
},{
  "I":[
    {"I1":["I1-1","I1-2","I1-3","I1-4"]},
    {"I2":["I2-1","I2-2","I2-3","I2-4"]},
    {"I3":["I3-1","I3-2","I3-3","I3-4"]},
  ]
},{
  "J":[
    {"J1":["J1-1","J1-2","J1-3","J1-4"]},
    {"J2":["J2-1","J2-2","J2-3","J2-4"]},
    {"J3":["J3-1","J3-2","J3-3","J3-4"]},
  ]
},{
  "K":[
    {"K1":["K1-1","K1-2","K1-3","K1-4"]},
    {"K2":["K2-1","K2-2","K2-3","K2-4"]},
    {"K3":["K3-1","K3-2","K3-3","K3-4"]},
  ]
},{
  "L":[
    {"L1":["L1-1","L1-2","L1-3","L1-4"]},
    {"L2":["L2-1","L2-2","L2-3","L2-4"]},
    {"L3":["L3-1","L3-2","L3-3","L3-4"]},
  ]
},{
  "M":[
    {"M1":["M1-1","M1-2","M1-3","M1-4"]},
    {"M2":["M2-1","M2-2","M2-3","M2-4"]},
    {"M3":["M3-1","M3-2","M3-3","M3-4"]},
  ]
},{
  "N":[
    {"N1":["N1-1","N1-2","N1-3","N1-4"]},
    {"N2":["N2-1","N2-2","N2-3","N2-4"]},
    {"N3":["N3-1","N3-2","N3-3","N3-4"]},
  ]
},{
  "O":[
    {"O1":["O1-1","O1-2","O1-3","O1-4"]},
    {"O2":["O2-1","O2-2","O2-3","O2-4"]},
    {"O3":["O3-1","O3-2","O3-3","O3-4"]},
  ]
},{
  "P":[
    {"P1":["P1-1","P1-2","P1-3","P1-4"]},
    {"P2":["P2-1","P2-2","P2-3","P2-4"]},
    {"P3":["P3-1","P3-2","P3-3","P3-4"]},
  ]
},{
  "Q":[
    {"Q1":["Q1-1","Q1-2","Q1-3","Q1-4"]},
    {"Q2":["Q2-1","Q2-2","Q2-3","Q2-4"]},
    {"Q3":["Q3-1","Q3-2","Q3-3","Q3-4"]},
  ]
},{
  "R":[
    {"R1":["R1-1","R1-2","R1-3","R1-4"]},
    {"R2":["R2-1","R2-2","R2-3","R2-4"]},
    {"R3":["R3-1","R3-2","R3-3","R3-4"]},
  ]
},{
  "S":[
    {"S1":["S1-1","S1-2","S1-3","S1-4"]},
    {"S2":["S2-1","S2-2","S2-3","S2-4"]},
    {"S3":["S3-1","S3-2","S3-3","S3-4"]},
  ]
},{
  "T":[
    {"T1":["T1-1","T1-2","T1-3","T1-4"]},
    {"T2":["T2-1","T2-2","T2-3","T2-4"]},
    {"T3":["T3-1","T3-2","T3-3","T3-4"]},
  ]
},{
  "U":[
    {"U1":["U1-1","U1-2","U1-3","U1-4"]},
    {"U2":["U2-1","U2-2","U2-3","U2-4"]},
    {"U3":["U3-1","U3-2","U3-3","U3-4"]},
  ]
},{
  "V":[
    {"V1":["V1-1","V1-2","V1-3","V1-4"]},
    {"V2":["V2-1","V2-2","V2-3","V2-4"]},
    {"V3":["V3-1","V3-2","V3-3","V3-4"]},
  ]
},{
  "W":[
    {"W1":["W1-1","W1-2","W1-3","W1-4"]},
    {"W2":["W2-1","W2-2","W2-3","W2-4"]},
    {"W3":["W3-1","W3-2","W3-3","W3-4"]},
  ]
},{
  "X":[
    {"X1":["X1-1","X1-2","X1-3","X1-4"]},
    {"X2":["X2-1","X2-2","X2-3","X2-4"]},
    {"X3":["X3-1","X3-2","X3-3","X3-4"]},
  ]
},{
  "Y":[
    {"Y1":["Y1-1","Y1-2","Y1-3","Y1-4"]},
    {"Y2":["Y2-1","Y2-2","Y2-3","Y2-4"]},
    {"Y3":["Y3-1","Y3-2","Y3-3","Y3-4"]},
  ]
},{
  "Z":[
    {"Z1":["Z1-1","Z1-2","Z1-3","Z1-4"]},
    {"Z2":["Z2-1","Z2-2","Z2-3","Z2-4"]},
    {"Z3":["Z3-1","Z3-2","Z3-3","Z3-4"]},
  ]
}
]

HTML:

<h6>省</h6>
<ul class="provinceLetter"></ul>
<ul class="provinceName"></ul>
<ul class="provinceCity"></ul>

Js:

//省份数据渲染及选择 provinceSort
let letterIndex = 0 //默认下标
let letterOne = "" //字母默认
let nameOne = "" //省份默认
$.each(provinceSort,function(index,val){
  $.each(val,function(key){
    let provinceLetter = `<li>${key}</li>`
    $(".provinceLetter").append(provinceLetter)
  })
})
$(".provinceLetter").find("li").first().addClass("hover")
letterOne = $(".provinceLetter").find("li").first().text();
$.each(provinceSort[0][letterOne], function(x,val) {
  $.each(val,function(key){
    let provinceName = `<li>${key}</li>`
    $(".provinceName").append(provinceName);
  })
})
$(".provinceName").find("li").first().addClass("hover")
nameOne = $(".provinceName").find("li").first().text();
$.each(provinceSort[0][letterOne][0][nameOne], function(x,val) {
  let provinceCity =`<li>${val}</li>`
  $(".provinceCity").append(provinceCity);
})
$(".provinceCity").find("li").first().addClass("hover")

$(".provinceLetter").on("click","li",function(){
  $(this).addClass("hover").siblings().removeClass("hover")
  letterOne = $(this).text()
  letterIndex = $(this).index()
  $(".provinceName").empty()
  $.each(provinceSort[letterIndex][letterOne],function(index,val){
    $.each(val,function(key){
      let provinceName = `<li>${key}</li>`
      $(".provinceName").append(provinceName)
    })
  })
  $(".provinceName").find("li").first().addClass("hover")
  nameOne = $(".provinceName").find("li").first().text();
  $(".provinceCity").empty()
  $.each(provinceSort[letterIndex][letterOne][0][nameOne],function(index,val){
    let provinceCity = `<li>${val}</li>`
    $(".provinceCity").append(provinceCity)
  })
})

$(".provinceName").on("click","li",function(){
  $(this).addClass("hover").siblings().removeClass("hover")
  nameOne = $(this).text()
  let nameIndex = $(this).index()
  $(".provinceCity").empty()
  $.each(provinceSort[letterIndex][letterOne][nameIndex][nameOne],function(index,val){
    let provinceCity = `<li>${val}</li>`
    $(".provinceCity").append(provinceCity)
  })
})

补充:

JavaScript中的 ` `(反引号)模板字符串，模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

模板字符串中的换行和空格都是会被保留的

字符串插入变量和表达式时，变量名写在 ${} 中，${} 中也可以放入JavaScript表达式。

jQuery.each()方法:

jQuery on() 方法: