效果如下:
模拟数据:
//模拟数据
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表达式。