layui中select动态渲染

在layui中进行select标签编写 内的数据可能有情况会失效 或者值进行不显示

是因为layui中的规范 约定  需利用

layui.use(['form']),function(){

var form = layui.form;

form.render();

}

来进行表格渲染

<div class="layui-form" style="float: left">

<form class="layui-form" action="" lay-filter="test1">

<div id="fileList" class="layui-form" style="width: 450px;">

<select lay-filter="test1">

</select>

</div>

</form>

</div>

---

需注意的属性 id="fileList"  lay-filter="test1"

 此时 select标签内无任何选项 注意:layui需在外部div上强制设置class=layui-form

否则渲染会失效

 

js代码初始化数据 从后台查询数据并给select增加option选项

 

思路:通过$.get请求 直接请求selectFileList接口 

此接口直接返回的是一个List<Object> fileList 实体类List

结果传递到前台后发现是字符串 无法通过for循环来进行遍历赋值

所以JSON.parse 将字符串转换为JSON对象

在经过for循环来获取id 和 filename

$("#id type")

获取fileList 增加<option对象>

 

renderForm()方法必须要放进去

否则会造成动态生成失效问题

//render渲染

function renderForm() {

layui.use('form', function () {

var form = layui.form();//高版本去掉括号

form.render();

});

}

 

---

 此时layui select选择框动态渲染功能已完成

 

效果图