layui 多选插件selectM实现联动

平时经常使用的多选插件就是layui的selectM，新的需求需要在原有基础上，实现联动。本来是多选，现在需要改成每次选择一个，然后线上版本根据选择的包名自动获取。为了偷懒，没有直接把包名直接改成改成单选，因为后续需求可能会出现，下拉两个的联动，因此研究了下selectM的源码，并作了选中事件的源码修改。

源码添加选中后的函数

在页面的js中，实现下拉函数，这里因为重写的js是全局的，因此如果一个页面上存在两个selectM的对象，都会执行改方法，因此需要根据id指定需要执行该方法的元素。

第一个下拉列表

默认的数据可以直接在初始化的时候，指定data属性的url来自动填充数据，因为使用联动或者有操作才会获取数据，因此改为动态获取。

        list = selectM({//元素容器【必填】elem: '#package'//候选数据【必填】//默认值, selected: ''//最多选中个数，默认5, max: 1//input的name 不设置与选择器相同(去#.), name: 'package'//值的分隔符, delimiter: ','//候选项数据的键名, field: {idName: 'id', titleName: 'name'}, width: 300});//去后台获取数据
var new_data = list.getData("<?php echo \yii\helpers\Url::to('index.php?r=publish/get-package&worker_id=' . $worker_id);?>" + '&type=' + type);
//手动设置数据源
list.config.data = new_data;
//需要render 页面才会出现效果，比较坑的是需要render两次才会生效，不知道是不是我代码有问题list.render();list.render();

联动下拉框

      online = selectM({//元素容器【必填】elem: '#serverType'//候选数据【必填】//默认值, selected: ''//最多选中个数，默认5, max: 100//input的name 不设置与选择器相同(去#.), name: 'serverType'//值的分隔符, delimiter: ','//候选项数据的键名, field: {idName: 'id', titleName: 'name',statusName:'status'}, width: 300});

第一个下拉框选中元素以后，会把选中的元素也就是存放在em中获取到，然后根据这个元素，去填充第二个下拉框的内容。代码如下

  function AfterSelected(em,_this) {if(_this.config.elem=='#package'){if(em.length>0){online_set(type,online,em[0]);}}}//设置在线server_type的关联function online_set(type, online,package='') {if (type == 'client') {online.config.data = [];} else {if(package!=''){online.config.data = online.getData("<?php echo \yii\helpers\Url::to('/index.php?r=publish/get-online-server-type');?>"+'&package='+package);}}online.render();online.render();}

源码demo

https://download.csdn.net/download/abc8125/19384747

layui 多选插件selectM实现联动相关推荐

layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
始于 layui 的一个多选解决方案,前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了.xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, ...
layui多选下拉使用笔记
formSelects-v4:http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html 201809:http:/ ...
layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...
如何获取layui表格选中行的数据
在项目中有很多涉及到表格的模块,有时候当你需要保存数据的时候,而这些数据都在表格中你却获取不到,这就让人很苦恼了,所以下面就讲下如何获取layui表格中选中行的数据, 注意这里只是layui表格的获取 ...
基于layui实现的省市县区三级联动下拉选择器
基于layui实现的省市县区三级联动下拉选择器关于layui 这里不做介绍,直戳我阅读关于本省市区级联下拉选择器本选择器已经将它封装成一个layui的插件,使用起来非常方便,支持一个页面中使用多 ...
bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）
文章目录 layui复选框组件:如何操控隐藏域实现checked状态切换(含代码.案例.截图) 注意: 案例 · 应用场景 · 说明: 案例 · 截图 · 示下主要代码 · 示下: 使用说明: 博主 ...
layui复选框默认选中
layui复选框默认选中 table.render({elem: '#projectMaterialList', cols: [[ //标题栏{checkbox: true}, {type: 'num ...