jQuery实现三级联动效果

2019-11-19 17:20:43

字体：大中小

来源：转载

供稿：网友

很久没写了，顺带复习，写了一个jQuery实现的三级联动，供大家参考，具体内容如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现功能比较全面的全选和多选

下一篇：Spring Boot+AngularJS+BootStrap实现进度条示例代码