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