前言

在用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才能实现，前端框架也可以变通的使用。