<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
body {
font-size:13px;
text-align:center;
}
div {
width:500px;border:1px solid #000000;
background-color:#f5e8e8;
margin:100px auto;
padding:10px;
}
</style>
</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>
<script src="jquery-1.8.3.js"></script>
<script>
$(function () {
function Init(node) {
return node.html("<option>---请选择---</option>");
}
//多维数组做数据来源
var db = {
暴雪: {
魔兽世界: "伊利丹,阿尔萨斯,穆萨罗",
星际争霸: "凯瑞甘,雷诺,诺娃,泰凯斯",
守望先锋:"源氏,半藏,猎空,黑百合"
},
阿里巴巴: {
淘宝: "假货1,假货2,假货3",
天猫: "翻新1,翻新2,翻新3,翻新4",
支付宝: "敬业福,爱国福,友善福,和谐福,富强福"
},
腾讯: {
英雄联盟: "1,2,3",
绝地求饶: "98k,M4,AKM,M16",
跪地求生: "三级头,三级甲,三级包,八倍镜",
}
};
//初始化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>
三级联动的jquery代码
猜你喜欢
转载自blog.csdn.net/jasonson__/article/details/79755403
今日推荐
周排行