jQuery 3 급 연동 효과 실현

3411 단어 jQuery삼 단 연동
오랫동안 쓰 지 못 했 습 니 다.복습 과 함께 jQuery 가 실현 한 3 급 연동 을 썼 습 니 다.참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

<!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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기