layui结合ajax实现下拉菜单联动效果

ゝ一世哀愁。 2022-11-14 13:18 228阅读 0赞

![11f4800b45bf04c9cc53cb44278cf05e.png][]

大家好好，我是雄雄，欢迎关注公众号：雄雄的小课堂。

昨天分享的是使用layui集合springboot实现图片上传，文章地址在这里，需要的小伙伴们可以去看看：

今天给大家分享的内容也是那天在造项目的时候完成的，难道是不难，不过比较经典。那就是联动菜单的实现。

我们下来看看效果：

![6b7108bc1c124f3d24505cb86b8123da.gif][]

一般常见的也用在“省市级联动菜单”，比如第一个下拉列表的值是所有省份名字，第二个则是第一个所选省的所属市，第三个则是县，乡镇、村屯等。

接下来我们看看如何实现该功能。

前端页面采用layui框架，则需要我们引入layui.css和layui.js，这里就不细说了，下面是下拉列表的代码：

<div class="layui-form-item">
            <label class="layui-form-label">商品类别</label>
            <div class="layui-input-inline" style="width: 20%">
                <select name="categoryleveloneId"   lay-filter="classify" id="one">
                    <option value="">请选择</option>
                    <option  th:each="cate : ${oneList}" th:value="${cate.id}" th:text="${cate.name}"></option>
    
                </select>
            </div>
            <div class="layui-input-inline" style="width: 20%">
                <select name="categoryleveltwoId"  lay-filter="twoCate" id="two">
                    <option value="">请选择</option>
                    <option  th:each="cate : ${twoList}" th:value="${cate.id}" th:text="${cate.name}"></option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 20%">
                <select name="categorylevelthreeId" id="three">
                    <option value="">请选择</option>
                    <option  th:each="cate : ${threeList}" th:value="${cate.id}" th:text="${cate.name}"></option>
                </select>
            </div>
        </div>

代码中：th:each="cate : $\{threeList\}"是thymeleaf的语法。注意每个select标签的name和id。

下面我们来看看<script>中的代码，主要业务都在这里面：

上面我们可以看得到，数据是通过ajax请求的，接下来，看看后台springmvc中所对应的代码：

//根据父编号查询信息(给前台传json格式的数据)
    @RequestMapping("getCateByParentid")
    @ResponseBody
    public List getCateByParentid(Integer pid) {
       List cList = productCategoryService.getAllCategoryByParent(pid);
       return cList;
    }

因为两个ajax所请求的方法都是同一个 **getCateByParentid**，所以控制器中只写一个即可，最后运行，效果就出来了。

看完了吗？看完了点个赞再走呗~

**往期精彩**

[layui上传图片，前端直接拷代码，后端……][layui]

[2021-03-28][layui]

[![ae551e8bccfbd12e297c8582b0a384af.png][] ][layui]

[微信超级更新！电脑上也能刷朋友圈了！][Link 1]

[2021-03-26][Link 1]

[![d52301978ef432861068a8dcc1e5b1d1.png][] ][Link 1]

[哈哈哈哈哈哈！发现微信一个bug][bug]

[2021-03-25][bug]

[![512d9f2638f1a171df3c0423efda7ab5.png][] ][bug]

[我一般在B站看这些破玩意...][B_...]

[2021-03-24][B_...]

[![5e0b2a51efa36fd6398b8037c9dffa6d.png][] ][B_...]

[有哪些道理是我当了程序员后才知道的？][Link 2]

[2021-03-23][Link 2]

[![4fedfbe7f03eba1a20de42b4cc1b1371.png][] ][Link 2]

![80ed48daf056b3804c06bfa114bf9e8f.png][]

![ce139f58128a8ee985e0b1d035de7a79.png][]

点分享

![cb2c127dba18d34ef41941a1f25be23e.png][]

点点赞

![aed41b3e8a886d5a23ed9a76457629ac.png][]

点在看

[11f4800b45bf04c9cc53cb44278cf05e.png]: /images/20221022/3288747c98474e3b9c590ccf8ef5ff3a.png
[6b7108bc1c124f3d24505cb86b8123da.gif]: /images/20221022/ff7584e5e0b34598a8b568e156633cc4.png
[layui]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fdfd3a0f856c5769f5b01c19db8ec8500e8da0a0aa9d4b5270ad4214e3d1a04b615d78b0d&idx=1&mid=2247501106&scene=21&sn=b76161cd976b0970fac2fb823c4d9b22#wechat_redirect
[ae551e8bccfbd12e297c8582b0a384af.png]: /images/20221022/2950dd23242c4a3eb0bfea27870a18f4.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde03a0f8571505635897484af416d8efba0d5ebe0a0ebd1df3d1800bcdb32c2aa7fa9edd&idx=1&mid=2247501026&scene=21&sn=348e2de2ddbb618f6e8a5e7f528b6810#wechat_redirect
[d52301978ef432861068a8dcc1e5b1d1.png]: /images/20221022/dc7254ecbe204a938637ad3fb6144f67.png
[bug]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde31a0f85727959d88c597a0f4278b206ad5761be3b570b321d36f9336a71a2f4da5d4ff&idx=1&mid=2247501008&scene=21&sn=a2141928543223add6959f7f506ee538#wechat_redirect
[512d9f2638f1a171df3c0423efda7ab5.png]: /images/20221022/638c5a3ad8164586bdb0255e949ec6d5.png
[B_...]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde5ba0f8574db6929e4f555f3d6cc21ba0a25b9f44297db0446c34215a1845847766a6b3&idx=1&mid=2247500986&scene=21&sn=8421098f2d2e0c23bafd0af0445b4e5b#wechat_redirect
[5e0b2a51efa36fd6398b8037c9dffa6d.png]: /images/20221022/f6070fc2aca445f8a3a9f8b543013b13.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde45a0f85753a79d590603ae4d5dfa07e06f45b76dc3f755fc9f07534dc31c03c7282378&idx=1&mid=2247500964&scene=21&sn=13e9a06f5905501be7dffa6fdfb4a5b7#wechat_redirect
[4fedfbe7f03eba1a20de42b4cc1b1371.png]: /images/20221022/e432096eee6b4ac6846f85ca12fd079e.png
[80ed48daf056b3804c06bfa114bf9e8f.png]: /images/20221022/1995919eba254461ac0fd7854e358c61.png
[ce139f58128a8ee985e0b1d035de7a79.png]: /images/20221022/b2e7f03777884c0cbe7e89455f6a8fc8.png
[cb2c127dba18d34ef41941a1f25be23e.png]: /images/20221022/43ee500d86ab48d2a39da6c49fbe0adf.png
[aed41b3e8a886d5a23ed9a76457629ac.png]: /images/20221022/0590d2ce2b514ea583ec101b0fbc2100.png