jQuery实现三级联动效果
程序员文章站
2023-11-30 21:05:04
很久没写了,顺带复习,写了一个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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 浅析PHP微信支付通知的处理方式
下一篇: java入门