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 + "");
})
}
})
})
}
})
})
})
企业:
---请选择---
产品:
---请选择---
嗯嗯:
---请选择---
```