最近做了一個簡單項目，后臺用layui快速構(gòu)建前端，其中有一個分類多選的場景。也就是一級分類和二級分類多可以多選，基本業(yè)務(wù)流程是：用戶可以選擇一個或多個一級分類，沒選擇分類后，系統(tǒng)請求對應(yīng)的二級分類數(shù)據(jù)，重新在前臺渲染二級分類的數(shù)據(jù)。

其實在以前的項目，使用過其他的庫實現(xiàn)這樣的流程。但是因為這個使用layui，而筆者本人對代碼是有強迫癥的，盡量減少重復(fù)的東西。所以盡量直接用layui來實現(xiàn)，但通過查看手冊和看它代碼，并沒有直接提供這一功能。然后在layui官網(wǎng)搜索第三方庫，發(fā)現(xiàn)了幾個，其中有一個叫做selectM.js的相對來說比較簡單，剛好符合這個場景，而且默認(rèn)ui風(fēng)格完全跟layui保持一致；只有不到10kb。下面是作者提供的參數(shù)文檔：

看上去貌似使用起來沒什么問題，但是實際上使用的時候還是發(fā)現(xiàn)了一些小“坑”，這里分享一下供大家參考，可能有更加優(yōu)雅的方式完成，主要是兩個問題：

一、點擊選中或取消選中下拉選項后，回調(diào)問題。

文檔中提供了一個filter的配置參數(shù)，里面也說明了的作用跟layui的lay-filter一致，也就是綁定一個觸發(fā)的事件函數(shù)。然而實際上并沒有效果，閱讀其源代碼發(fā)現(xiàn)并沒有這個參數(shù)出現(xiàn)。不清楚是作者是不是上傳錯代碼版本了；或者可能是作者先寫好了文檔，開始是想做完整多級多選聯(lián)動選擇的邏輯的，后面可能太忙沒做完；里面似乎也沒有這個回調(diào)。解決辦法是：在setSelected方法的最后，添加回調(diào)代碼邏輯，如：

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

然后在調(diào)用的時候，添加callback參數(shù)進(jìn)行回調(diào)，回調(diào)的值其實就是源碼中的values，values就包括當(dāng)前選擇的選項等數(shù)據(jù)信息。調(diào)用代碼如下：

var catid = selectM({
    elem: '#catid'
   ,data: d.data
   ,max:6
   ,width:400
   ,verify:'required'
   ,callback:function (values) {
      /*回調(diào)邏輯*/
  }
});

這樣就可以實現(xiàn)選擇或取消選擇選項后，進(jìn)行回調(diào)，重新加載新的二級分類數(shù)據(jù)了。然而這個時候又發(fā)現(xiàn)了兩個一個問題，下面將會分析這個問題。

二、庫本身僅提供了初始化已選選項的API，但沒有提供下拉框所有數(shù)據(jù)重載。

雖然文檔表格中沒有體現(xiàn)，但通過其源代碼可以看到實際上提供了一個obj.set的方法，用于初始化已選選項，這個可以用于在編輯內(nèi)容的時候，默認(rèn)勾選上次保存的選項信息。然而，重新渲染二級下拉框數(shù)據(jù)的方法貌似并沒有提供。于是手寫網(wǎng)絡(luò)請求代碼實現(xiàn)，但是出現(xiàn)一個問題，就是偶次數(shù)渲染的時候，二級分類下拉框點擊沒有任何反應(yīng)。

期間嘗試過多種方式，包括粗暴地修改源碼中的$E.on方法里面的邏輯，事實也是可以的，然而既然都用了庫了，做這么大的改動就有點本末倒置了。所以用了一種相對來說更加優(yōu)雅一點的方式，首先在二級分類實例化本庫前定義一個全局變量比如catid2，然后在實例化前做判斷，如果catid2已經(jīng)實例化存在一個對象，則進(jìn)行重載。

/*全局變量*/
var catid2='';
/*如果已經(jīng)存在，也就是重載數(shù)據(jù)的時候會執(zhí)行這段代碼，重載數(shù)據(jù)。
其中render可以參考庫的源代碼，其實更layui一樣的；
在使用layui的很多時候也需要用render重載數(shù)據(jù)。*/
if(catid2) catid2.render();
/*開始創(chuàng)建實例*/
catid2 = selectM({ 
    elem: '#catid2' 
    ,data: d.data 
    ,max:6 
    ,width:400 
    ,verify:'required' 
    ,callback:function (values) { 
       /*回調(diào)邏輯*/ 
    } 
});

這樣基本就可以解決數(shù)據(jù)重載問題。

至此，可以用selectM.js 完整實現(xiàn)該場景的所有功能。