ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryの3レベル連携効果を実装する方法

jQueryの3レベル連携効果を実装する方法

小云云
リリース: 2018-01-23 16:56:55
オリジナル
2403 人が閲覧しました

この記事では主に 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;
    }
    p {
      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(&#39;,&#39;), function () {
                    $("#selC").append("<option>" + this + "</option>");
                  })
                }
              })
            })
          }
        })
      })

    })
  </script>
</head>
<body>
  <p 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>
  </p>
</body>
</html>
ログイン後にコピー

関連する推奨事項:

Chosen は jQuery に 3 レベルのリンケージ関数を実装します

jQuery は EasyUi を使用して 3 レベルのリンケージ ドロップダウン ボックス効果を実装します

jquery と ajax は 3 つのレベルを実装します


地方自治体レベルの連携 カプセル化と非カプセル化の2つの方法があります

🎜🎜🎜🎜

以上がjQueryの3レベル連携効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート