三级联动的jquery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body {
          font-size:13px;
          text-align:center;
        }
        div {
          width:500px;border:1px solid #000000;
          background-color:#f5e8e8;
          margin:100px auto;
          padding:10px;
        }
      </style>
</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>
<script src="jquery-1.8.3.js"></script>
<script>
    $(function () {
        function Init(node) {
          return node.html("<option>---请选择---</option>");
        }
  　　　　　　　//多维数组做数据来源
        var db = {
          暴雪: {
            魔兽世界: "伊利丹,阿尔萨斯,穆萨罗",
            星际争霸: "凯瑞甘,雷诺,诺娃,泰凯斯",
            守望先锋:"源氏,半藏,猎空,黑百合"
          },
          阿里巴巴: {
            淘宝: "假货1,假货2,假货3",
            天猫: "翻新1,翻新2,翻新3,翻新4",
            支付宝: "敬业福,爱国福,友善福,和谐福,富强福"
          },
          腾讯: {
            英雄联盟: "1,2,3",
            绝地求饶: "98k,M4,AKM,M16",
            跪地求生: "三级头,三级甲,三级包,八倍镜",
          }
        };
  　　　　　　　　//初始化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>
三级联动的jquery代码

猜你喜欢
