今天在做項(xiàng)目的時(shí)候遇到了一個(gè)棘手的問(wèn)題，客戶(hù)要求兩個(gè)菜單聯(lián)動(dòng)，按理說(shuō)我們可用直接用迅睿cms的聯(lián)動(dòng)菜單來(lái)完成，可是，后續(xù)我們還需要根據(jù)其中一個(gè)值的內(nèi)容來(lái)判斷一些問(wèn)題，所以這里沒(méi)法用聯(lián)動(dòng)菜單，而且迅睿cms的聯(lián)動(dòng)菜單如果加載了layui的js則會(huì)有bug，頁(yè)面中會(huì)生成一個(gè)沒(méi)有任何作用的空的選擇器，把他隱藏掉還會(huì)導(dǎo)致原聯(lián)動(dòng)菜單的問(wèn)題，而且聯(lián)動(dòng)菜單沒(méi)有css，與其他內(nèi)容很不協(xié)調(diào)，所以我們這里只能使用layui的select選擇器。而數(shù)據(jù)來(lái)源則使用自定義鏈接。

    思路很簡(jiǎn)單，首先利用layui的選擇器選擇事件，拿到當(dāng)前內(nèi)容的value。

    因?yàn)?，迅睿cms的自定義資料后端接口需要一個(gè)parent_id，也就是自定義鏈接的id，但有時(shí)候與我們選擇框事件傳過(guò)來(lái)的value不同，所以我們需要做一下判斷，就是很笨的var一個(gè)字段，判斷value等于幾的時(shí)候給這個(gè)字段賦上指定值，很簡(jiǎn)單不細(xì)說(shuō)了。

    然后我們拿到第二級(jí)選擇器的數(shù)據(jù)后，清空第二級(jí)選擇器的內(nèi)容，并利用拿到的數(shù)據(jù)構(gòu)建新的html。

    上圖可以看到，layui根據(jù)代碼渲染出dl和dd標(biāo)簽，并且css也全都在dd標(biāo)簽上，想當(dāng)然的會(huì)清空dl標(biāo)簽內(nèi)的內(nèi)容，并添加dd標(biāo)簽，其實(shí)這樣是錯(cuò)誤的，如果你這樣做了，那么與option中value值的不同的lay-value的值都不會(huì)被選中，正確做法是清空option的值并新建option的內(nèi)容才能正確實(shí)現(xiàn)聯(lián)動(dòng)菜單的效果。

    以下是代碼：注意，最后千萬(wàn)不要忘記重新渲染lay的表單。

    了解更多迅睿cms的問(wèn)題點(diǎn)擊這里。