suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie den dreistufigen Verknüpfungseffekt von jQuery

So implementieren Sie den dreistufigen Verknüpfungseffekt von jQuery

小云云
小云云Original
2018-01-23 16:56:552373Durchsuche

Dieser Artikel stellt allen den dreistufigen Verknüpfungseffekt im Detail vor. Ich hoffe, dass er jedem helfen kann. 


<!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>

Verwandte Empfehlungen:

Ausgewählt in jQuery implementiert dreistufige Verknüpfungsfunktion

Teilen von Beispielen für jQuery mit EasyUi zur Implementierung von Drop-Down-Box-Effekten mit dreistufiger Verknüpfung

jquery und Ajax können eine dreistufige Verknüpfung in Provinzen und Gemeinden implementieren, kapselnd und nicht kapselnd


Das obige ist der detaillierte Inhalt vonSo implementieren Sie den dreistufigen Verknüpfungseffekt von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery ajax easyui 封装
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery-Formularvalidierungsimitation Toast-Eingabeaufforderungseffekt BeispielfreigabeNächster Artikel：JQuery-Formularvalidierungsimitation Toast-Eingabeaufforderungseffekt Beispielfreigabe

In Verbindung stehende Artikel

Mehr sehen