最近做了一个简单项目，后台用layui快速构建前端，其中有一个分类多选的场景。也就是一级分类和二级分类多可以多选，基本业务流程是：用户可以选择一个或多个一级分类，没选择分类后，系统请求对应的二级分类数据，重新在前台渲染二级分类的数据。

其实在以前的项目，使用过其他的库实现这样的流程。但是因为这个使用layui，而笔者本人对代码是有强迫症的，尽量减少重复的东西。所以尽量直接用layui来实现，但通过查看手册和看它代码，并没有直接提供这一功能。然后在layui官网搜索第三方库，发现了几个，其中有一个叫做selectM.js的相对来说比较简单，刚好符合这个场景，而且默认ui风格完全跟layui保持一致；只有不到10kb。下面是作者提供的参数文档：

看上去貌似使用起来没什么问题，但是实际上使用的时候还是发现了一些小“坑”，这里分享一下供大家参考，可能有更加优雅的方式完成，主要是两个问题：

一、点击选中或取消选中下拉选项后，回调问题。

文档中提供了一个filter的配置参数，里面也说明了的作用跟layui的lay-filter一致，也就是绑定一个触发的事件函数。然而实际上并没有效果，阅读其源代码发现并没有这个参数出现。不清楚是作者是不是上传错代码版本了；或者可能是作者先写好了文档，开始是想做完整多级多选联动选择的逻辑的，后面可能太忙没做完；里面似乎也没有这个回调。解决办法是：在setSelected方法的最后，添加回调代码逻辑，如：

if(typeof this.config.callback=='function'){this.config.callback(values)};

然后在调用的时候，添加callback参数进行回调，回调的值其实就是源码中的values，values就包括当前选择的选项等数据信息。调用代码如下：

var catid = selectM({
    elem: '#catid'
   ,data: d.data
   ,max:6
   ,width:400
   ,verify:'required'
   ,callback:function (values) {
      /*回调逻辑*/
  }
});

这样就可以实现选择或取消选择选项后，进行回调，重新加载新的二级分类数据了。然而这个时候又发现了两个一个问题，下面将会分析这个问题。

二、库本身仅提供了初始化已选选项的API，但没有提供下拉框所有数据重载。

虽然文档表格中没有体现，但通过其源代码可以看到实际上提供了一个obj.set的方法，用于初始化已选选项，这个可以用于在编辑内容的时候，默认勾选上次保存的选项信息。然而，重新渲染二级下拉框数据的方法貌似并没有提供。于是手写网络请求代码实现，但是出现一个问题，就是偶次数渲染的时候，二级分类下拉框点击没有任何反应。

期间尝试过多种方式，包括粗暴地修改源码中的$E.on方法里面的逻辑，事实也是可以的，然而既然都用了库了，做这么大的改动就有点本末倒置了。所以用了一种相对来说更加优雅一点的方式，首先在二级分类实例化本库前定义一个全局变量比如catid2，然后在实例化前做判断，如果catid2已经实例化存在一个对象，则进行重载。

/*全局变量*/
var catid2='';
/*如果已经存在，也就是重载数据的时候会执行这段代码，重载数据。
其中render可以参考库的源代码，其实更layui一样的；
在使用layui的很多时候也需要用render重载数据。*/
if(catid2) catid2.render();
/*开始创建实例*/
catid2 = selectM({ 
    elem: '#catid2' 
    ,data: d.data 
    ,max:6 
    ,width:400 
    ,verify:'required' 
    ,callback:function (values) { 
       /*回调逻辑*/ 
    } 
});

这样基本就可以解决数据重载问题。

至此，可以用selectM.js 完整实现该场景的所有功能。