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

                  })

                }

              })

            })

          }

        })

      })

    })

    企业：

        ---请选择--- 

    产品：

        ---请选择--- 

    嗯嗯：

        ---请选择---