如题,话不多说,直接上代码(注意事项下方说明)
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>');
到此为止,问题基本已解决,如有不妥之处,请大家指出,感谢!