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

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


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

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

我们下来看看效果:

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

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

前端页面采用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 getCateByParentid(Integer pid) {
   List cList = productCategoryService.getAllCategoryByParent(pid);
   return cList;
}

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

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

目录
相关文章
QGS
|
7月前
|
XML 前端开发 JavaScript
手搭手Ajax经典基础案例省市联动
手搭手Ajax经典基础案例省市联动
QGS
19 1
|
13天前
|
前端开发 Java
layui结合ajax实现下拉联动效果
layui结合ajax实现下拉联动效果
31 0
|
8月前
|
前端开发
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
66 0
|
10月前
|
JSON 前端开发 JavaScript
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
674 0
|
前端开发
layui下,在ajax中使用prop等方法无效
layui下,在ajax中使用prop等方法无效
130 0
|
13天前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
25 0
N..
|
13天前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
28 1
|
6月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
55 0
|
13天前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
66 0
|
13天前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤