最近也是用到了若依的多级联动，效果如下（可多级）

若依有已经封装好的一套js，难点在于后端数据封装，前端按照封装好的代码引用即可。

这里主要分享下关于后端数据如何封装多层。后端代码直接奉上。

记得要把集合转json处理：JSON.toJSON(cxList)

cxList ：返回前端的数据List<CxSelect> cxList = new ArrayList<CxSelect>();//deptList：第一级数据集合：进行循环，把第一级的对象封装到最外层的集合for (SysDept dept:deptList){CxSelect firstSelect = new CxSelect();firstSelect.setN(dept.getDeptName());firstSelect.setV(dept.getDeptId().toString());//第二级数据集合List<BaseSourceChannel> pidList = baseSourceChannelService.selectBaseSourceChannelList(faParam);List<CxSelect> secondList = new ArrayList<CxSelect>();for (BaseSourceChannel as:pidList){CxSelect secondSelect = new CxSelect();secondSelect.setN(as.getSourceName());secondSelect.setV(as.getId().toString());sonParam.setStatus("1");sonParam.setPid(as.getId());List<BaseSourceChannel> sonList = baseSourceChannelService.selectBaseSourceChannelList(sonParam);//第三级数据集合List<CxSelect> thirdList = new ArrayList<CxSelect>();for (BaseSourceChannel model:sonList){CxSelect thirdSelect = new CxSelect();thirdSelect.setN(model.getSourceName());thirdSelect.setV(model.getId().toString());thirdList.add(thirdSelect);}//在每一次第二级的对象内的第三级集合循环后，把第三级的集合赋值给第二级对象的S属性里，//并把该对象塞到第二级集合里secondSelect.setS(thirdList);secondList.add(secondSelect);}//在每一次第一级的对象内的第二级集合循环后，把第二级的集合赋值给第一级对象的S属性里，//并把该对象塞到第一级集合里firstSelect.setS(secondList);cxList.add(firstSelect);}

前端引入相关js --cxselect

<th:block th:include=“include :: jquery-cxselect-js” />

前端html部分：

<p id="element"><li><label>来源渠道：</label><select class="first" name="sourceOne" placeholder="一级来源渠道"></select></li><li><select class="second" name="source" placeholder="二级来源渠道"> </select></li></p>

前端js部分：
selects：数组长度代表下拉框的联动个数：每个元素和p的class属性对应，第一个元素表示第一级
data：表示后端封装的数据。
v：表示value，和返回对象的V属性对应
n：表示key，和返回对象的N属性对应

切记：前端下拉框个数要和后端封装层数保持一致。

。
理解后端数据封装逻辑之后，剩下的基本没有太大难度，这里就不多说了。

今天的分享到此结束！

欢迎留言交流！互相成长！