级联选择器

已于 2023-12-28 15:06:24 修改
阅读量465 收藏 7
点赞数 7
文章标签： javascript 前端 css
于 2023-12-26 14:49:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_unny_wang/article/details/135221975
版权

初版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .cascader {
        height: 40px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        border-radius: 4px;
        margin-top: 20px;
        width: 200px;
        line-height: 40px;
        padding: 0 10px;
      }

      .eo-cascader-panel {
        display: flex;
      }

      .eo-cascader-panel ul {
        width: 200px;
        box-sizing: border-box;
        color: #606266;
        border: 1px solid #e4e7ed;
        border-right: none;
        position: relative;
      }
      .eo-cascader-panel ul:last-child {
        border-right: 1px solid #e4e7ed;
      }

      .eo-cascader-panel ul li {
        list-style: none;
        cursor: pointer;
        padding: 6px 10px;
      }
      .eo-cascader-panel ul li.active {
        background: #1ca3fc;
        color: #fff;
      }
      .eo-cascader-panel ul li:hover {
        background: #1ca3fc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="cascader_warp">
      <!-- 级联选择按钮 -->
      <div class="cascader">请选择</div>
      <!-- 级联选择内容 -->
      <div class="eo-cascader-panel"></div>
      <!-- 存id的input -->
      <input class="my_cascader" type="hidden" />
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
      // 数据
      var tags = [
        {
          id: 1,
          label: "中部",
          children: [
            {
              id: 2,
              label: "山西",
              children: [
                {
                  id: 3,
                  label: "太原",
                  children: [
                    {
                      id: 31,
                      label: "小店区",
                    },
                    {
                      id: 32,
                      label: "迎泽区",
                    },
                    {
                      id: "TEST001",
                      label: "晋源区",
                    },
                  ],
                },
                { id: 4, label: "吕梁" },
              ],
            },
            {
              id: 5,
              label: "北京",
              children: [
                { id: 6, label: "通州区" },
                { id: 7, label: "海淀区" },
              ],
            },
          ],
        },
        {
          id: 8,
          label: "西北",
          children: [
            {
              id: 9,
              label: "陕西",
              children: [
                { id: 10, label: "西安" },
                { id: 11, label: "延安" },
                { id: 21, label: "榆林" },
              ],
            },
            {
              id: 12,
              label: "新疆维吾尔族自治区",
              children: [
                { id: 13, label: "乌鲁木齐" },
                { id: 14, label: "克拉玛依" },
              ],
            },
          ],
        },
      ];

      $(document).click(function () {
        $(".eo-cascader-panel").hide();
      });

      // 级联选择器第一级
      $(".cascader").click(function (e) {
        e.stopPropagation();
        $(".eo-cascader-panel").show();
        $(".eo-cascader-panel").empty();
        $(".eo-cascader-panel").append(
          `<ul class="eo-cascader-menu1" data-level="1"></ul>`
        );
        for (var i = 0; i < tags.length; i++) {
          var tempId = tags[i].id;
          var tempText = tags[i].label;
          var children = JSON.stringify(tags[i].children) || "";
          $(".eo-cascader-menu1").append(
            `<li data-id="${tempId}" data-index="${i}" data-children=${children}>${tempText}</li>`
          );
        }
      });

      handlerCascader(1);
      // 级联效果
      function handlerCascader(level) {
        // li的点击效果
        $(".eo-cascader-panel")
          .off("click")
          .on("click", "li", function (e) {
            e.stopPropagation();
            $(".eo-cascader-panel li").removeClass("active");
            $(this).addClass("active");
            $(".cascader").text($(this).text()); // 设置选中文字
            $("input.my_cascader").val($(this).data("id")); //  设置选中id
            var tempTags1 = $(this).data("children");
            var tempLevel = +$(this).parent().data("level") + 1;
            if (tempTags1.length) {
              $(".eo-cascader-menu-next").remove();
              $(".eo-cascader-menu1").after(
                `<ul class="eo-cascader-menu-next" data-level="${tempLevel}"></ul>`
              );
              localStorage.setItem("children", tempTags1.length); // 存储子级
              for (var j = 0; j < tempTags1.length; j++) {
                var tempId = tempTags1[j].id;
                var tempText = tempTags1[j].label;
                var children = JSON.stringify(tempTags1[j].children) || "";
                $(".eo-cascader-menu-next").append(
                  `<li data-id="${tempId}" data-index="${j}" data-children=${children}>${tempText}</li>`
                );
              }
            }
            // 递归调用下一级
            handlerCascader(level + 1);
          });

        var tempChildren = localStorage.getItem("children");
        if (!tempChildren) {
          return;
        }
      }
    </script>
  </body>
</html>

优化版本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .cascader {
        height: 40px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        border-radius: 4px;
        margin-top: 20px;
        width: 200px;
        line-height: 40px;
        padding: 0 10px;
      }

      .eo-cascader-panel {
        display: flex;
      }

      .eo-cascader-panel ul {
        width: 200px;
        box-sizing: border-box;
        color: #606266;
        border: 1px solid #e4e7ed;
        border-right: none;
        position: relative;
      }
      .eo-cascader-panel ul:last-child {
        border-right: 1px solid #e4e7ed;
      }

      .eo-cascader-panel ul li {
        list-style: none;
        cursor: pointer;
        padding: 6px 10px;
      }
      .eo-cascader-panel ul li.active {
        background: #1ca3fc;
        color: #fff;
      }
      .eo-cascader-panel ul li:hover {
        background: #1ca3fc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="cascader_warp">
      <!-- 级联选择按钮 -->
      <div class="cascader">请选择</div>
      <!-- 级联选择内容 -->
      <div class="eo-cascader-panel"></div>
      <!-- 存id的input -->
      <input class="my_cascader" type="hidden" />
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
      // 数据
      var tags = [
        {
          id: 1,
          label: "中部",
          children: [
            {
              id: 2,
              label: "山西",
              children: [
                {
                  id: 3,
                  label: "太原",
                  children: [
                    {
                      id: 31,
                      label: "小店区",
                    },
                    {
                      id: 32,
                      label: "迎泽区",
                    },
                    {
                      id: "TEST001",
                      label: "晋源区",
                    },
                  ],
                },
                { id: 4, label: "吕梁" },
              ],
            },
            {
              id: 5,
              label: "北京",
              children: [
                { id: 6, label: "通州区" },
                { id: 7, label: "海淀区" },
              ],
            },
          ],
        },
        {
          id: 8,
          label: "西北",
          children: [
            {
              id: 9,
              label: "陕西",
              children: [
                { id: 10, label: "西安" },
                { id: 11, label: "延安" },
                { id: 21, label: "榆林" },
              ],
            },
            {
              id: 12,
              label: "新疆维吾尔族自治区",
              children: [
                { id: 13, label: "乌鲁木齐" },
                { id: 14, label: "克拉玛依" },
              ],
            },
          ],
        },
      ];

      $(document).click(function () {
        $(".eo-cascader-panel").hide();
      });

      // 级联选择器第一级
      $(".cascader").click(function (e) {
        e.stopPropagation();
        $(".eo-cascader-panel").show();
        $(".eo-cascader-panel").empty();
        $(".eo-cascader-panel").append(
          `<ul class="eo-cascader-menu1" data-level="1"></ul>`
        );
        for (var i = 0; i < tags.length; i++) {
          var tempId = tags[i].id;
          var tempText = tags[i].label;
          var children = JSON.stringify(tags[i].children) || "";
          $(".eo-cascader-menu1").append(
            `<li data-id="${tempId}" data-index="${i}" data-children=${children}>${tempText}</li>`
          );
        }
         handlerCascader();
      });

      // 级联效果
      function handlerCascader() {
        // li的点击效果
        $(".eo-cascader-panel")
          .off("click")
          .on("click", "li", function (e) {
            e.stopPropagation();
            $(".eo-cascader-panel li").removeClass("active");
            $(this).addClass("active");
            $(".cascader").text($(this).text()); // 设置选中文字
            $("input.my_cascader").val($(this).data("id")); //  设置选中id

            var tempTags1 = $(this).data("children"); // 子元素
            var tempLevel = +$(this).parent().data("level"); // 当前级别
            var currentDom = "eo-cascader-menu" + tempLevel; // 当前ul的类名
            var nextDom = "eo-cascader-menu" + (+tempLevel + 1); // 下一个ul类名

            // 清空当前ul元素后面的内容
            $("." + currentDom)
              .nextAll()
              .remove();

            if (tempTags1.length) {
              $("." + currentDom).after(
                `<ul class="${nextDom}" data-level="${tempLevel + 1}"></ul>`
              );
              for (var j = 0; j < tempTags1.length; j++) {
                var tempId = tempTags1[j].id;
                var tempText = tempTags1[j].label;
                var children = JSON.stringify(tempTags1[j].children) || "";
                $("." + nextDom).append(
                  `<li data-id="${tempId}" data-index="${j}" data-children=${children}>${tempText}</li>`
                );
              }
            }
          });
      }
    </script>
  </body>
</html>
王靓靓
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cascaderjs级联选择器
08-12
级联选择器，当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择
JS实现树型级联选择
08-04
用JS实现树型结构的级联选择..类似XP的资源管理器.
js 级联选择地区
12-03
from 表单选择详细选择地区，高效，取值方便，是个很不错的js。
elemenet-plus级联选择器（el-cascader）一级单选 二级三级多选+hover弹窗样式修复+
XIAO_A_fighting的博客
01-05 3279
此时的v-model值为一个数组，数组的第一项则为一级的id，第二项则为二级的id…最近的需求需要实现级联选择器的一级只支持单选，二三级可以支持多选。对于原生的这个组件来说，并没有这个功能，所以需要自己在组件上进行二次封装。
奇葩功能实现：级联选择框组件el-cascader实现同一级的二级只能单选，但是一级可以多选
yorcentroll的博客
07-11 5744
但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。 但是本人已经不想折腾， 谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！
layui多选级联选择器
02-23
在layui中，级联选择器是一种常用于数据层级关系展示和选择的组件，尤其适用于地区选择、部门结构等场景。本篇文章将深入探讨layui的多选级联选择器及其无限级联功能。 首先，我们要理解什么是级联选择器。级联选择...
基于vue2.0实现的级联选择器
01-19
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联 web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况： 单个级联 (下拉选择框，单选) 单个级联 (多项选择) 二级联动 （省份...
react级联选择器/支持多选/单选
最新发布
01-31
在React.js开发中，"react级联选择器/支持多选/单选"是一个常见的组件需求，用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景，用户可以逐级展开选项，进行单选或多选操作。...
详解关于element级联选择器数据回显问题
10-17
其中，级联选择器（Cascader）是一种常用的选择组件，用于处理层次结构的数据，例如地区、部门等。然而，在实际应用中，级联选择器的数据回显问题是一个常见的挑战，尤其是在编辑或更新表单时。本文将详细探讨 ...
级联选择器【简单了解】
dxn16638400024的博客
07-26 1095
级联选择器是一种常见的UI控件，在Web页面上用于显示层级结构的选择器。它由多个下拉列表组成，每个下拉列表的选项值都受到上一个下拉列表中所选值的限制。根据用户所选值的变化，级联选择器可以动态地更新下一个下拉列表中的选项。例如，一个级联选择器可以用于选择国家、省份和城市。首先，用户选择国家，然后在所选国家的省份中选择省份，最后在所选省份的城市中选择城市。因为，既然使用了组件，那组建的数据名称肯定和自己的有所不同，这个，就是将名称给对上，使其联动起来，就可以使用了！
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 5276
Vue3+TS 以 Vue3选择框（Select）为基础封装的级联选择框组件，支持清除，搜索，自定义搜索过滤函数等等
级联选择器的使用
m0_50013284的博客
10-20 2082
级联选择器
Vue 学习随笔系列一 -- Cascader 级联选择器
mm_0123456789的博客
03-02 3362
Cascader 级联选择器
Java后端+Elementui前端，实现树形JSON数据+级联选择器
qq_20683411的博客
06-18 963
ElementUI的级联选择器的代码实现，前端+后端
Vue级联选择器
qq_44584476的博客
11-15 3062
1、内:添加级联选择器 2、export内:在data内声明变量options 3、methods内：编写函数将后端返回【或者前端的静态结果res】赋值给options
element-ui —Cascader 级联选择器（选中方式处理）
weixin_43742167的博客
08-03 6493
element-ui —Cascader 级联选择器点击文本实现选中
利用级联选择器实现省市区三级联动【vue + elementUI Plus | uViewUI】
qq_36687211的博客
03-29 7118
利用级联选择器实现省市区三级联动
element-ui cascader(级联选择器)组件使用心得
qq_40228475的博客
03-08 3903
最近公司项目需求需要用到级联选择功能，第一次遇到这个功能，因为本身项目就用的element-ui，所以就去官方组件库找了找有没有这种组件，发现果然有这个组件 直接复制的官方代码到项目里，一切正常的运行起来了，接下来就是调接口拿数据，返回的数据如下图所示： 成功拿到数据，接下来就是赋值了，先直接换上试试 this.selectData = response.data 此时，发现页面组件已经渲染成功，显示似乎也没有问题，随便点了点试试，发现了第一个bug，列表虽然展示出来了，但本来的三级联
HTML-选择器
Wh532530的博客
03-31 4725
四种状态的顺序最好固定，link visited hover active。逗号选择器，可以同时设置多个标签，使用逗号进行分割。要使用伪元素选择器一定要加上content属性。标签选择器：根据标签的名称获取。id属性唯一，class不唯一。获取的是某个标签的第一级子标签。获取的某个标签里面所有的子标签。id选择器：获取的是ID属性。类选择器 ：class属性。
element 级联选择器
09-07
Element 级联选择器是基于 Element UI 组件库的一种选择器，用于实现级联选择功能。它可以让用户从多个层次的选项中进行选择，每一级选项的内容会根据上一级选项的选择而动态改变。 在 Element UI 中，级联选择器由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值