jQuery实现三级联动效果

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 + "");

})

}

})

})

}

})

})

})

企业：

---请选择---

产品：

---请选择---

嗯嗯：

---请选择---