三级联动的jquery代码

最新推荐文章于 2022-11-14 20:06:16 发布

原创最新推荐文章于 2022-11-14 20:06:16 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#三级联动

jquery插件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的多级联动下拉框案例。该案例通过解析一个多维数组来动态生成企业的不同产品及其内容选项，实现了良好的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body {
          font-size:13px;
          text-align:center;
        }
        div {
          width:500px;border:1px solid #000000;
          background-color:#f5e8e8;
          margin:100px auto;
          padding:10px;
        }
      </style>
</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>
<script src="jquery-1.8.3.js"></script>
<script>
    $(function () {
        function Init(node) {
          return node.html("<option>---请选择---</option>");
        }
  　　　　　　　//多维数组做数据来源
        var db = {
          暴雪: {
            魔兽世界: "伊利丹,阿尔萨斯,穆萨罗",
            星际争霸: "凯瑞甘,雷诺,诺娃,泰凯斯",
            守望先锋:"源氏,半藏,猎空,黑百合"
          },
          阿里巴巴: {
            淘宝: "假货1,假货2,假货3",
            天猫: "翻新1,翻新2,翻新3,翻新4",
            支付宝: "敬业福,爱国福,友善福,和谐福,富强福"
          },
          腾讯: {
            英雄联盟: "1,2,3",
            绝地求饶: "98k,M4,AKM,M16",
            跪地求生: "三级头,三级甲,三级包,八倍镜",
          }
        };
  　　　　　　　　//初始化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>