jQuery实现三级联动效果
程序员文章站
2023-08-17 10:51:15
很久没写了，顺带复习，写了一个jquery实现的三级联动，供大家参考，具体内容如下
...
很久没写了，顺带复习，写了一个jquery实现的三级联动，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style type="text/css">
body {
font-size:13px;text-align:center;
}
div {
width:400px;border:1px solid #000000;
background-color:#f5e8e8;margin:100px 300px;
padding:10px;
}
</style>
<script type="text/javascript">
$(function () {
function init(node) {
return node.html("<option>---请选择---</option>");
}
//多维数组做数据来源
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("<option>" + changshang + "</option>");
})
//一级变动
$("#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("<option>" + pp + "</option>");
});
$("#selb").change(function () {
init($("#selc"));
$.each(pps, function (pp,xhs) {
if ($("#selb option:selected").text()==pp) {
$.each(xhs.split(','), function () {
$("#selc").append("<option>" + this + "</option>");
})
}
})
})
}
})
})
})
</script>
</head>
<body>
<div class="bg-primary">
<hr />
企业：<select id="self">
<option>---请选择---</option>
</select>
产品：<select id="selb">
<option>---请选择---</option>
</select>
嗯嗯：<select id="selc">
<option>---请选择---</option>
</select>
<p id="pid"></p>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。