js相關：jQuery實作三級關聯效果
釋出于 2020-7-21|
複制連結
摘記: 很久沒寫了，順帶複習，寫了一個jQuery實作的三級關聯，供大家參考，具體内容如下
```xhtml
..
很久沒寫了，順帶複習，寫了一個jQuery實作的三級關聯，供大家參考，具體内容如下
```xhtml
body {
font-size:13px;text-align:center;
}
div {
width:400px;border:1px solid #000000;
background-color:#f5e8e8;margin:100px 300px;
padding:10px;
}
$(function () {
function Init(node) {
return node.html("---請選擇---");
}
//多元數組做資料來源
var db = {
騰訊: {
LOL: "德瑪,EZ瑞爾,劍聖",
BNS: "氣功師,力士,刺客,氣宗師",
DNF:"A,B,C,D"
},
阿裡巴巴: {
APPLAY: "AL,EZ瑞爾,劍聖",
HUABEI: "AL,力士,刺客,氣宗師",
JIEBEI: "AL,B,C,D"
},
百度: {
ggs: "BD,EZ瑞爾,劍聖",
BD: "BD,力士,刺客,氣宗師",
BDBD: "BD,B,C,D",
}
};
//初始化select節點
$.each(db, function (changShang) {
$("#selF").append("" + changShang + "");
})
//一級變動
$("#selF").change(function () {
//清空二三級
Init($("#selB"));
Init($("#selC"));
$.each(db,function (cs,pps) {
if ($("#selF option:selected").text() == cs) {
$.each(pps, function (pp, xhs) {
$("#selB").append("" + pp + "");
});
$("#selB").change(function () {
Init($("#selC"));
$.each(pps, function (pp,xhs) {
if ($("#selB option:selected").text()==pp) {
$.each(xhs.split(','), function () {
$("#selC").append("" + this + "");
})
}
})
})
}
})
})
})
企業：
---請選擇---
産品：
---請選擇---
嗯嗯：
---請選擇---
```