Layui在select下拉框中动态添加选项

如题，话不多说，直接上代码（注意事项下方说明）

HTML：

<form class="layui-form" action="">
    <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="" lay-filter="test" id="test">
        <!-- 选项动态放置于此处 -->
        </select>
    </div>
</form>

JS：

// layui.use头部参考
// 其中注意"form = layui.form"、"$ = layui.jquery"为必写项，方便下方操作
layui.use(['table','form','layer'], function(){
    let table = layui.table, form = layui.form, layer = layui.layer, $ = layui.jquery;
    ...
});

// Option参数说明：Option("text","value")
$('#test').append(new Option("开","0"));
$('#test').append(new Option("关","1"));
// 最关键需要重新渲染下拉框
form.render('select');

效果图：

如果达不到预想中的效果可以留意一下注意事项。

注意事项：

1.select下拉框中的 lay-filter 和 id 属性必填，最好都写同一个字段，在本例子中均为 "test"。

2.可能有些小伙伴会发现，在HTML中引入的select失去了Layui风格，可能是因为没有<form>标签包裹的原因，测试中最好加上<form>标签以及其子<div class="layui-input-inline>标签，保证select正常呈现Layui风格。

3.以下两行代码作用和效果是相同的，可以替换应用。

$('#test').append(new Option("开","0"));

$('#test').append('<option value="0">开</option>');

到此为止，问题基本已解决，如有不妥之处，请大家指出，感谢！