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

静态⽹页+layui渲染html代码

js代码

动态⽹页+layui渲染（级联下拉列表）后台将第⼀个下拉列表的数据传到前台

public String getApiInfoByTypePage(@PathVariable String type, Model model, HttpServletRequest request) { List typeList1 = apiService.findApiTypeByPid(1); log.error(typeList1);

model.addAttribute(\"typeList1\}

前台页⾯⽤的是Thymeleaf的遍历将数据加载出来，然后layui⾃动渲染

⼀级下拉列表的监听事件

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

var pId = data.value;// ⼀级列表的id

$.post('/getApiTypeByPid', {'pId': pId, '': 2}, function (msg) {// 请求⼆级列表的数据 // console.log(msg);

$('#quiz2').empty();// 将⼆级列表的内容清空

for (var i in msg) {// 遍历数据赋值给⼆级列表的内容

var $content = $('' + msg[i].typeName + ''); $('#quiz2').append($content); }

form.render('select');// 注意：数据赋值完成之后必须调⽤该⽅法，进⾏layui的渲染，否则数据出不来

}); });

数据回显的核⼼逻辑（java的根据⽬录格式，⾃⾏编写）js部分

// 服务⽬录的数据回显

var sesType = [[${type}]];

var sesType1 = [[${type1}]];// ⼀级⽬录id var sesStatus = [[${status}]]; // ⼀级⽬录回显

$(\"#quiz1\").each(function () {// 遍历select

$(this).children(\"option\").each(function () {// 遍历option

if (this.value == sesType1) {// 跟后台传过来的id相同就显⽰selected // console.log(\"⼀级⽬录\"+$(this).text()); $(this).attr(\"selected\

$.post('/getApiTypeByPid', {'pId': sesType1, '': 2}, function (msg) {// 根据⼀级⽬录的id获取⼆级⽬录的信息 // console.log(msg);

$('#quiz2').empty();// 清空

for (var i in msg) { // 遍历，进⾏赋值

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的下拉列表的数据回显⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。