jQuery realizes three level linkage effect

2021-07-26 06:07:07
OfStack
I haven't written it for a long time. I reviewed it by the way and wrote a three-level linkage realized by jQuery for your reference. The specific contents are as follows

<!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>--- Please select ---</option>");
      }
 　　　　　　　 // Multidimensional array as data source 
      var db = {
         Tencent : {
          LOL: " Demar ,EZ Riel , Blade Master ",
          BNS: " Qigong master , Lux , Assassin , Master Qi ",
          DNF:"A,B,C,D"
        },
         Alibaba : {
          APPLAY: "AL,EZ Riel , Blade Master ",
          HUABEI: "AL, Lux , Assassin , Master Qi ",
          JIEBEI: "AL,B,C,D"
        },
         Baidu : {
          ggs: "BD,EZ Riel , Blade Master ",
          BD: "BD, Lux , Assassin , Master Qi ",
          BDBD: "BD,B,C,D",
        }
      };
  　　　　　　　 　 // Initialization select Node 
      $.each(db, function (changShang) {
        $("#selF").append("<option>" + changShang + "</option>");
      })
      //1 Grade variation 
      $("#selF").change(function () {
        // Empty 23 Grade 
        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 />
     Enterprises: <select id="selF">
        <option>--- Please select ---</option>  
    </select>
     Products: <select id="selB">
        <option>--- Please select ---</option>  
    </select>
     Mm-hmm: <select id="selC">
        <option>--- Please select ---</option>  
    </select>
    <p id="pid"></p>
  </div>
</body>
</html>