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

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

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

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

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

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

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

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

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

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

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

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

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

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

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