thymeleaf实现树状下拉框（二级联动）

小鱼儿 2023-09-30 00:57 16阅读 0赞

## 项目场景： ##

承接上篇文章，此次记录的是树状下拉框的二级联动，点击次链接查看上篇文章: [thymeleaf实现树状下拉框][thymeleaf].

## 问题描述 ##

`提示：这里描述项目中遇到的问题：`  
根据选中的组织，展示组织成员

## 解决方案： ##

> 实际上就是点击一级菜单的时候用ajax调用获取二级信息接口即可

> 后端接口

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16]

> 前端

新增页面  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
修改页面稍有变化  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 2]

> 函数

点击一级菜单的时候用ajax调用获取二级信息接口，然后将元素通过append拼接起来，下拉框循环数据  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 4]

> 显示效果

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
这就是一个简单的二级联动demo,有什么见解大家可以多多指教！

[thymeleaf]: https://blog.csdn.net/dissplay1/article/details/123596059
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5670ff81099d4369b6075f67061b8785.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/92f27403c53647259cc0ecb797caad61.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/6ba2552c96324a169c592fda87d002f7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/8c3ccfd81ea7449997979d1d62a36174.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/2384bed7384340cb9b48b650e9228ca0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/b9cca2488fa248919e60aea35aa38911.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16