jQuery实现三级联动效果
很久没写了,顺带复习,写了一个jQuery实现的三级联动,供大家参考,具体内容如下
body{ font-size:13px;text-align:center; } div{ width:400px;border:1pxsolid#000000; background-color:#f5e8e8;margin:100px300px; padding:10px; } $(function(){ functionInit(node){ returnnode.html(""); } //多维数组做数据来源 vardb={ 腾讯:{ 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(""); }) //一级变动 $("#selF").change(function(){ //清空二三级 Init($("#selB")); Init($("#selC")); $.each(db,function(cs,pps){ if($("#selFoption:selected").text()==cs){ $.each(pps,function(pp,xhs){ $("#selB").append(""); }); $("#selB").change(function(){ Init($("#selC")); $.each(pps,function(pp,xhs){ if($("#selBoption:selected").text()==pp){ $.each(xhs.split(','),function(){ $("#selC").append(""); }) } }) }) } }) }) })
企业:产品: 嗯嗯:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。