前言
在用Layui写后台管理页面的时候,有的时候查询的下拉框是需要动态从数据库获取,当用户修改了数据库数据的时候,可以动态的生成最新的下拉框选项。
页面
<form>
垃圾名称:
<div class="layui-inline">
<select id="refusename" name="refusename">
<option value="">全部</option>
</select>
</div>
</from>
js写法
layui.use(['form', 'table', "laydate", 'layer'], function () {
var form = layui.form;
var table = layui.table;
var layer = layui.layer;
//重点在这里, 获取后台数据, 再拼装, 最后记得form.render
$.ajax({
url: '/refuse-web/admin/getRefuseName',
dataType: 'json',
type: 'get',
success: function (data) {
let str="<option value=''>全部</option>";
for(let i of data){
str+=`<option value='${i.id}'>${i.name}</option>`;
}
$("#refusename").html(str);
form.render();
//重新渲染 固定写法
}
});
}
总结
这种写法非常适合动态获取类型表这种表数据,作为条件筛选,这种写法不一定是要Layui才能实现,前端框架也可以变通的使用。