layui表单中下拉列表动态添加option
- 总结:防止读取乏味,这里先总结一下“layui中给表单下拉列表动态添加option一定要在添加完成之后刷新表单(form.render())否则将死活不显示”
- 今天用layui做下拉列表动态添加option的时候发现如下场景(两种方式我认为是同样的但是却效果不一样)
- 场景:我从后端传入前段了一些数据,存放到列表中(file_name),我想要在前段动态的添加file_name中的内容
- 操作:里面需要引用的js和css文件没有引用,这里只说明现象
<button type="button" class="layui-btn layui-btn-warm layui-hide" id="add">添加</button>
<form class="layui-form " action="/read_bin/option">
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="option" lay-verify="required" id="select">
<option value="">---请选择需要展示的json文件---</option>
</select>
</div>
</div>
</form>
<script>
layui.use(['upload', 'element', 'layer'], function () {
var $ = layui.jquery,
form = layui.form,
$("select").append("<option>1</option>")
$("add").on('click', function(){
$("select").append("<option>1</option>")
})
});
</script>
- 预期中上面两种方式都是可以成功将option添加到select中,但是事实上是方式一是成功地,方式二是不成功的
- 经过查询资料发现表单更新的话需要添加一个方法:form.render() 如下