layui结合ajax实现下拉菜单联动效果
AJAX 实现 效果 结合 联动 layui 下拉菜单
2023-09-14 08:57:39 时间
大家好好,我是雄雄,欢迎关注公众号:雄雄的小课堂。
昨天分享的是使用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,所以控制器中只写一个即可,最后运行,效果就出来了。
看完了吗?看完了点个赞再走呗~
往期精彩
点分享
点点赞
点在看
相关文章
- layui结合ajax实现下拉联动效果
- Ajax基本案例详解之$.getjson的实现
- Ajax基本案例详解之$.ajax的实现
- jquery与ajax应用
- jquery ajax(实现单独提交某个form)
- struts2实现ajax的两种方式
- Ajax
- ajax结合mysql数据库和smarty实现局部数据状态的刷新
- PHP+ajax实现二级联动【post+json方式】
- 【面试题】Ajax的原理和优缺点总结
- ajax向服务端发送请求验证用户名是否可用小示例
- .atitit.web 推送实现解决方案集合(3)----dwr3 Reverse Ajax
- ajax回调函数 返回404
- 从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)
- jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
- 异步请求ajax介绍,原生ajax,$.ajax基本使用
- ajax和json数据
- 什么是 AJAX ?
- ajax调用接口文档,进行数据渲染的模板
- 前端网络基础-通过XMLHttpRequest实现AJAX (二)
- 前端网络基础-通过XMLHttpRequest实现AJAX(一)