好资源导航 » 文章资讯 » 基于layui的下拉列表的数据回显方法

基于layui的下拉列表的数据回显方法

2023-08-13 18:07:09 69

静态网页+layui渲染

html代码


选择框


请选择市
杭州2
杭州3
杭州4
杭州5

js代码

动态网页+layui渲染（级联下拉列表）

后台将第一个下拉列表的数据传到前台

publicStringgetApiInfoByTypePage(@PathVariableStringtype,Modelmodel,HttpServletRequestrequest){
ListtypeList1=apiService.findApiTypeByPid(1);
log.error(typeList1);
model.addAttribute("typeList1",typeList1);
}

前台页面用的是Thymeleaf的遍历将数据加载出来，然后layui自动渲染



请选择一级服务目录

请选择二级服务目录

一级下拉列表的监听事件

//监听一级服务目录下拉列表的选择时间
form.on('select(quiz1)',function(data){

varpId=data.value;//一级列表的id
$.post('/getApiTypeByPid',{'pId':pId,'':2},function(msg){//请求二级列表的数据
//console.log(msg);
$('#quiz2').empty();//将二级列表的内容清空
for(variinmsg){//遍历数据赋值给二级列表的内容
var$content=$(''+msg[i].typeName+'');
$('#quiz2').append($content);
}
form.render('select');//注意：数据赋值完成之后必须调用该方法，进行layui的渲染，否则数据出不来
});
});

数据回显的核心逻辑（java的根据目录格式，自行编写）

js部分

//服务目录的数据回显
varsesType=[[${type}]];
varsesType1=[[${type1}]];//一级目录id
varsesStatus=[[${status}]];
//一级目录回显
$("#quiz1").each(function(){//遍历select
$(this).children("option").each(function(){//遍历option
if(this.value==sesType1){//跟后台传过来的id相同就显示selected
//console.log("一级目录"+$(this).text());
$(this).attr("selected","selected");
$.post('/getApiTypeByPid',{'pId':sesType1,'':2},function(msg){//根据一级目录的id获取二级目录的信息
//console.log(msg);
$('#quiz2').empty();//清空
for(variinmsg){//遍历，进行赋值
if(msg[i].typeId==sesType){//判断要回显的二级目录
var$content1=$(''+msg[i].typeName+'');
$('#quiz2').append($content1);
}else{
var$content=$(''+msg[i].typeName+'');
$('#quiz2').append($content);
}

}
form.render('select');//注意：一定要调用该方法进行中心渲染，否则数据是显示不出来的
});
}
});
});

以上这篇基于layui的下拉列表的数据回显方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

基于layui的下拉列表的数据回显方法

热门推荐

随机推荐