jQuery如何实现三级联动效果

小编给大家分享一下jQuery如何实现三级联动效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站建设、建昌网络推广、成都微信小程序、建昌网络营销、建昌企业策划、建昌品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供建昌建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

具体内容如下

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

以上是“jQuery如何实现三级联动效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站名称：jQuery如何实现三级联动效果
文章转载：https://www.cdcxhl.com/article46/pjeghg.html

成都网站建设公司_创新互联，为您提供定制开发、网站建设、网站导航、电子商务、标签优化、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容