今天在做項目的時候遇到了一個棘手的問題,客戶要求兩個菜單聯動,按理說我們可用直接用迅睿cms的聯動菜單來完成,可是,后續我們還需要根據其中一個值的內容來判斷一些問題,所以這里沒法用聯動菜單,而且迅睿cms的聯動菜單如果加載了layui的js則會有bug,頁面中會生成一個沒有任何作用的空的選擇器,把他隱藏掉還會導致原聯動菜單的問題,而且聯動菜單沒有css,與其他內容很不協調,所以我們這里只能使用layui的select選擇器。而數據來源則使用自定義鏈接。
思路很簡單,首先利用layui的選擇器選擇事件,拿到當前內容的value。

因為,迅睿cms的自定義資料后端接口需要一個parent_id,也就是自定義鏈接的id,但有時候與我們選擇框事件傳過來的value不同,所以我們需要做一下判斷,就是很笨的var一個字段,判斷value等于幾的時候給這個字段賦上指定值,很簡單不細說了。
然后我們拿到第二級選擇器的數據后,清空第二級選擇器的內容,并利用拿到的數據構建新的html。

上圖可以看到,layui根據代碼渲染出dl和dd標簽,并且css也全都在dd標簽上,想當然的會清空dl標簽內的內容,并添加dd標簽,其實這樣是錯誤的,如果你這樣做了,那么與option中value值的不同的lay-value的值都不會被選中,正確做法是清空option的值并新建option的內容才能正確實現聯動菜單的效果。
以下是代碼:注意,最后千萬不要忘記重新渲染lay的表單。



了解更多迅睿cms的問題點擊這里。
上一篇: 迅睿cms的表單提交
下一篇: 在網頁中使用SheetJS導出excel



