layui select 动态选择框

layui select 动态选择框

@bp.get('/add')
@authorize("system:inventory:add", log=True)
def add():
    companys = Mat_Company.query.all()
    attributes = Mat_Attribute.query.all()
    classifications = Mat_Classification.query.all()
    categories = Mat_Categorie.query.all()

    return render_template('system/inventory/add.html', companys=companys)

利用上面的函数传给 add.html companys参数

   <div class="layui-form-item">
       <label class="layui-form-label">使用组织</label>
       <div class="layui-input-block">
           <select id="select-company" name="company" lay-filter="lay_company">
               <option value="">请选择</option>
               {% for company in companys %}
               <option value="{{ company.id }}">{{ company.company_name }}</option>
               {% endfor %}
           </select>
       </div>
      </div>

实现效果如图所示

而select选择获得的参数通过form获得，可以通过data.field的company属性传给后端，company为select的name标签

<script>
    layui.use(['form', 'jquery'], function () {
        let form = layui.form
        let $ = layui.jquery

        form.on('submit(inventory_save)', function (data) {
            $.ajax({
                url: '/system/inventory/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                            parent.layui.table.reload('inventory-table')
                        })
                    } else {
                        layer.msg(result.msg, { icon: 2, time: 1000 })
                    }
                }
            })
            return false
        });
    })
</script>