原生js實現二級聯動下拉列表菜單

二級聯動下拉列表菜單的難點在於對后台返回的數據進行解析，不多逼逼，直接上代碼

上圖是后台返回的數據

實現代碼如下：

 

var deviceNotExist = true;//防止數據重復

if(data.code == 0) { //查詢成功
var param = data.content;
for(i = 0; i < param.length; i++) {
deviceNotExist = true;
var detTim = [];
for(j in dev) {
if(param[i].sbbh == dev[j].sbbh) {
deviceNotExist = false;
var period = {
kssj: param[i].kssj,
jssj: param[i].jssj
}
tim[j].push(period);
break;
}
}
if(deviceNotExist) {
var deviceInfo = {
sbbh: param[i].sbbh,
sbmc: param[i].sbmc
}
dev.push(deviceInfo);
var period = {
kssj: param[i].kssj,
jssj: param[i].jssj
}
detTim.push(period);
tim.push(detTim);
}
}
mulArr.push(dev);
mulArr.push(tim);
for(var i = 0; i < mulArr[0].length; i++) {
$("#device").append("<option value=" + mulArr[0][i].sbbh + ">" + mulArr[0][i].sbmc + "</option>");
}
for(var i = 0; i < mulArr[1][0].length; i++) {
$("#period").append("<option value=startTime=" + mulArr[1][0][i].kssj + "&endTime=" + mulArr[1][0][i].jssj + ">" + mulArr[1][0][i].kssj + "-" + mulArr[1][0][i].jssj + "</option>");
}

 

//選擇下拉框列表內容時下面的列表實現聯動
$("#device").change(function() {
$("#period").html("");//改變列表值時先清空下面列表的內容
var dIndex = $("#device option:selected").index();//獲取當前選中列表的下標
for(var i = 0; i < mulArr[1][dIndex].length; i++) {
$("#period").append("<option value=startTime=" + mulArr[1][dIndex][i].kssj + "&endTime=" + mulArr[1][dIndex][i].jssj + ">" + mulArr[1][dIndex][i].kssj + "-" + mulArr[1][dIndex][i].jssj + "</option>");
}
})