本文主要为大家详细介绍了jquery实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
nbsp;html>body { font-size:13px;text-align:center; } p { 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 + ""); }) } }) }) } }) }) })
企业： ---请选择--- 产品： ---请选择--- 嗯嗯： ---请选择---
登录后复制
相关推荐：
jQuery中Chosen实现三级联动功能
jQuery使用EasyUi实现三级联动下拉框效果实例分享
jquery和ajax实现省市区三级联动封装和不封装两种方式
以上就是jQuery三级联动效果实现方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789347.html
