layui扩展组件xm-select选中当前分类及其所有子类

最新推荐文章于 2024-05-24 18:20:04 发布
最新推荐文章于 2024-05-24 18:20:04 发布
阅读量3.5k 收藏 2
点赞数 1
文章标签： layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fmtzy1991/article/details/121953739
版权

xm-select是一款比较好用的组件，但是仍然不是很完美，对于一些需求紧靠配置无法得到满足，就比如说：选中当前分类及其所有子分类：
在这里插入图片描述
在这里插入图片描述
从上面两个 官方例子截图可以看出：在严格父子结构模式下；选中父级时只选中了所有的最低级，并没有连同父级一起选中；而非严格父子结构时，那就选中哪个就是哪个，并不能满足我们上面的需求；经过多次试验，最终让我另辟蹊径，想出了解决方案。

在这里插入图片描述
就是使用on监听选择；从上面截图可以看出，我使用了非严格父子结构，原因是可以获取到当前点击节点的数据，使用严格父子结构无法获取父节点数据，所以不可行；
在获取点击节点的数据后，通过后台配合获取当前点击节点的所有子节点以及父级节点，并以数组的形式返回重新赋值，以此来实现我们的需求
在这里插入图片描述
就如上图，我选中了一个二级分类 发酵乳和风味发酵乳，就会通过on监听自动获取它下面的所有子分类以及它的父类
但是还是有一点小瑕疵，就是当把最低级的两个分类取消勾选时，二级和一级分类不会自动取消勾选。
以上就是我的处理方法，如果大家有什么更好的解决方案，欢迎留言讨论！！

vueStart
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui-多选下拉框-xm-select-demo源码
10-10
xm-select是layui扩展的一个强大组件，专为实现多选下拉框功能而设计。这个组件以其简洁的API和美观的样式，极大地提升了用户体验，简化了开发者的工作。 在“layui-多选下拉框-xm-select”中，源码主要分为两大...
layui-多选下拉框-xm-select.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
Layui使用总结及多选方案Xm-select
热门推荐
森小子的博客
01-16 2万+
文章目录一，Layui使用1.基础说明2.laydate3.Layui上传大文件游览器巨慢或者崩溃问题二，Xm-select1.普通多选形式2.拓展下拉树 一，Layui使用 参考：Layui官网 1.基础说明 加载所需模块：layui 的内置模块并非默认就加载的，他必须在你执行该方法后才会加载 layui.use(['form', 'laydate'], function(){ var fo...
掌握layui.xmSelect：打造高效、美观的下拉选择框
奇妙的Bug之旅
11-02 4446
在软件开发领域，下拉选择框是一种常见的用户界面元素，用于让用户从多个选项中进行选择。layui.xmSelect是一款功能强大、易于使用的下拉选择框插件，可以帮助开发者轻松实现这一功能。通过以上步骤和代码片段，你可以学会如何使用layui.xmSelect插件创建和定制下拉选择框，以及如何监听其变化。如果还没有安装，可以参考官方文档进行安装：https://www.layui.com/doc/start/quick.html。// 监听下拉选择框的变化。四、监听下拉选择框的变化。// 初始化下拉选择框。
layui扩展件（xm-select）实现下拉框
最新发布
m0_46590717的博客
05-24 1141
layui扩展件（xm-select）实现下拉框
Layui搜索下拉框(xm-select)
hengyua的博客
10-19 1403
xm-select 文档链接地址https://maplemei.gitee.io/xm-select/#/senior/remoteSearch layui官网https://www.layui.com/demo/ 最近做的一个项目要用的一个动态下拉框搜索,最开始用的是formSelects 但是这个数据量大的话,渲染的速度慢代码冗余,不够流畅,xm-select是formselects的升级版,利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展,下面是我使用的一个下拉单选搜索. .
下拉框 Xmselect layui 国省市区 三级 四级 联动 可搜索
Apricity0415的博客
12-23 1235
前端采用Layui框架的Xmselect下拉框插件。若要赋值该下拉框需要在之后。
layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-26 4133
在xm-select时，需要设置默认使用selected属性选中属性，增加`selected: true`的字段。为此，首先需要读取数据库中已经选择的选项，组成二维数组，然后和选项数据进行数组合并，组成新的data.
layui多选下拉框，多选，使用xm-select插件
qq_36836224的博客
06-13 9711
1. layui的多选下拉框可以使用 xm-select 插件实现。4. 这样一个基本的多选下拉框就创建成功了。你可以设置更多参数,如:- prop 设置显示和存储值的字段。- lay-verify 校验规则。- lay-search 搜索功能。3. 在页面添加选择器。- tips 提示信息。- max 最大选择数。
layui第三方插件xm-select
07-24
6. **与其他layui组件的联动**：“xm-select”可以与其他layui组件如表格、表单等无缝配合，实现联动效果，提高用户体验。 通过以上步骤，你就可以在layui项目中成功地集成并使用“xm-select”插件了。这个插件不仅...
xm-select，一款简单多选的select插件
08-03
再者，获取已选中的值和文本也是XM-SELECT的一大亮点。在用户进行多选操作后，开发者可以轻松地获取到用户的选择，这对于数据提交或者进一步的业务逻辑处理至关重要。插件通常提供API接口，如`getValue()`和`getText...
layui xm-select.js
12-22
xm-select.js 是 layui 中的一个扩展插件，专为实现复杂的下拉选择框功能而设计。在本文中，我们将深入探讨 layui 和 xm-select.js 的核心概念、功能及应用场景。 ### layui 简介 layui 是一个轻量级、模块化的前端...
2021-11-25 工作记录--xm-select实现下拉框多选且可搜索
weixin_48850734的博客
11-28 1万+
1、xm-select实现下拉框多选且可搜索 ???????????? 第一步、下载xm-select.js 文档地址：https://maplemei.gitee.io/xm-select/#/component/install【看文档，解疑难】 下载步骤 进入文档，点击左边的 “安装与使用”，根据需求选择下载方式，我选择的是码云下载： 我下载的是1.2.4版本： 解压文件，xm-select-v1.2.4/dist/xm-select.js 第二步、引入xm-select.js <scrip
layui的扩展组件，xmSelect的使用
weixin_42334518的博客
10-26 2922
有没有想过html中的下拉框也可以实现多选，并且有美丽的外观，流畅的加载动画，基于layui开发出来的xm-Select就会是一个很好的选择。 先来说一下这个组件在哪里下载，打开layui的官网，点击这里，进去然后搜索就可以找到这个组件。在这里有很多被分享出来好用的组件，都可以在这里找到。 第二步将他下载解压，放在项目的资源目录下，这个就看你的项目结构，主要是在页面中能够引用到它。绝对位置由您的项目结构决定。 <script src="plugin/xmSelect/xm-select.js"
2022-07-28 xm-select 的使用
ZT1090258642的博客
07-28 7420
文档。
LayUI，xmSelect下拉多选
weixin_44854779的博客
10-14 3712
LayUI，xmSelect下拉多选 示例，文档地址：https://maplemei.gitee.io/xm-select/#/component/install 基础用法 HTML： // 第一步，引入 xm-select.js <script src="/js/xm-select.js"></script> // 第二步，定义一个容器 <div id="xmSelectElement"></div> JS： // 第三步，渲染 var xmSele
xm-select自定义下拉框
weixin_42491847的博客
10-19 907
xm-select自定义下拉框
xm-select 下拉框分组单选事件
wen_284334906的博客
02-23 4626
xm-select 下拉框分组单选事件 效果图 分组基本写法自行查看官网 xm-select官网 官网下拉框分组写法中未含有 单选 操作样式，所以我们得自己增加on里面的监听事件，数据中的ParentId可自由设定，用做为监听事件中判断的依据，同一组中的ParentId的值是一样的，不同组的ParentId不一样。（列表有可能包含多条数据，一条数据为一组） on : function(data) { //监听事件 } ...
有一个layui select单选组件和一个xm-select多选组件，两个组件绑定同一个数据源，当select单选组件选中时，xm-select多选组件则不可选中这条数据，在xm-select中为禁用状态；反之当xm-select组件选中时，选中的数据在select单选组件中不可选中，为禁用状态
07-14
您可以使用一些JavaScript代码来实现这个需求。下面是一种可能的实现方式： 首先，假设您已经引入了所需的layui和xm-select库。然后，您可以使用以下代码： ```javascript // 获取单选组件和多选组件的 DOM 元素 var selectElem = layui.$('#selectId'); var xmSelectElem = layui.$('#xmSelectId'); // 绑定单选组件的 change 事件 selectElem.on('change', function(){ // 获取选中的值 var selectedValue = selectElem.val(); // 在多选组件中禁用对应的选项 xmSelectElem.find('.xm-select-linkage-group').each(function(){ var optionElem = layui.$(this); var optionValue = optionElem.attr('value'); if (selectedValue === optionValue) { optionElem.addClass('xm-select-disabled'); } else { optionElem.removeClass('xm-select-disabled'); } }); }); // 绑定多选组件的 change 事件 xmSelectElem.on('change', function(){ // 获取选中的值 var selectedValues = xmSelectElem.val(); // 在单选组件中禁用对应的选项 selectElem.find('option').each(function(){ var optionElem = layui.$(this); var optionValue = optionElem.val(); if (selectedValues.includes(optionValue)) { optionElem.prop('disabled', true); } else { optionElem.prop('disabled', false); } }); }); ``` 请注意，上述代码仅为示例，请根据您的实际情况进行相应的修改和调整。希望对您有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值