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

墨蓝 2022-11-14 07:55 226阅读 0赞

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

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

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

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

我们下来看看效果：

![在这里插入图片描述][20210328111212516.gif_pic_center]

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

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

前端页面采用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>`中的代码，主要业务都在这里面：

\`\`

<script>
        layui.use(['form', 'layer','laydate'],function(){ 
            $ = layui.jquery;  //获取jquey模块
            var form = layui.form; //获取form模块
            //第一个select改变事件
            form.on('select(classify)',function (data){ 
                //监听到了下拉框选择的选项，传递过来
                // console.log(data);//在控制台输出信息
                var classfies = data.value;
                //再利用ajax将数据传到后端，来获取到对应下拉框选项而出现的值
                $.ajax({ 
                    type:"post",
                    url:"/getCateByParentid",
                    data:{ "pid":classfies},
                    dataType:"json",
                    success:function (d) { 
                        // layer.alert(1122)
                        //对应的值传回，拼出html下拉框语句
                        var tmp='';
                        for (var i in d){ 
                            tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';
    
                        }
                        $("#two").html(tmp);
                        form.render();
                    },error:function () { 
                        layer.alert('请求失败');
                    }
                });
    
            });
    
            //第二个select改变事件
            form.on('select(twoCate)',function (data){ 
                //监听到了下拉框选择的选项，传递过来
                // console.log(data);//在控制台输出信息
                var classfies = data.value;
                //再利用ajax将数据传到后端，来获取到对应下拉框选项而出现的值
                $.ajax({ 
                    type:"post",
                    url:"/getCateByParentid",
                    data:{ "pid":classfies},
                    dataType:"json",
                    success:function (d) { 
                        //对应的值传回，拼出html下拉框语句
                        var tmp='';
                        for (var i in d){ 
                            tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';
    
                        }
                        $("#three").html(tmp);
                        form.render();
                    },error:function () { 
                        layer.alert('请求失败');
                    }
                });
            });
        })
    </script>

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

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTM3Mzk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/0a8e4069715b4723a9e8087bb048933b.png
[20210328111212516.gif_pic_center]: /images/20221022/68fc02a1e95d4631a1e6c8aec6d90f66.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax技术--多级联动下拉列表（$.ajax()）

运行结果： ![Center][] 1、设置zone.xml文件： <?xml version="1.0" encoding="UTF-8"?> <

落日映苍穹つ/ 2024年02月17日 23:50/ 0 赞/ 66 阅读

相关 javascript实现下拉选框ajax效果

javascript实现下拉选框ajax效果 > 在某些情况下，jq写的select 标签 onchange事件会无效，这种情况下采用javascript编写效果

深藏阁楼爱情的钟/ 2023年10月17日 17:19/ 0 赞/ 56 阅读

相关 layui下拉框联动查询效果

前言之前有这么一个功能，需要设计一个联动效果来联动几个选择框，假设这里是院系-专业-班级，又或者省-市-县，又或者一级部门-二级部门等等的，一个下拉框选择联动另一个下拉

川长思鸟来/ 2023年07月25日 09:15/ 0 赞/ 21 阅读

相关 JavaWeb Ajax实现下拉框联动

博主在做项目时，需要做一个根据学期无刷新地址栏获取课程的功能，类似于地区联动选择。如图所示： 1.运行演示 ![在这里插入图片描述][20210119154723185

谁践踏了优雅/ 2023年01月08日 08:18/ 0 赞/ 185 阅读

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

![11f4800b45bf04c9cc53cb44278cf05e.png][] 大家好好，我是雄雄，欢迎关注公众号：雄雄的小课堂。昨天分享的是使用layui集合spr

ゝ一世哀愁。/ 2022年11月14日 13:18/ 0 赞/ 240 阅读

相关 layui结合ajax实现下拉联动效果

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

墨蓝/ 2022年11月14日 07:55/ 0 赞/ 227 阅读

相关 ajax初级示例（下拉列表联动）

下拉列表联动效果如下动图： ![20190220175059790.gif][] 数据库表字段的信息 ![20190220173040565.png][]![2019

朱雀/ 2022年03月18日 11:17/ 0 赞/ 303 阅读

相关 AJAX多级下拉联动【JSON】

前言前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互。当时候我们的案例是二级联动，使用Servlet进行控制这次我们使用JSON作为数据载体在AJ

布满荆棘的人生/ 2021年09月17日 06:42/ 0 赞/ 416 阅读

相关 AJAX二级下拉联动【XML方式】

AJAX二级下拉联动案例我们在购物的时候，常常需要我们来选择自己的收货地址，先选择省份，再选择城市… 有没有发现：当我们选择完省份的时候，出现的城市全部都是根据省份来

太过爱你忘了你带给我的痛/ 2021年09月17日 06:40/ 0 赞/ 387 阅读

相关 jquery ajax 下拉列表三级联动

![在这里插入图片描述][20190803222142964.png] ![在这里插入图片描述][2019080322215935.png] ![在这里插入图片描述][

超、凢脫俗/ 2021年06月26日 16:06/ 0 赞/ 540 阅读