在使用Layui框架时，通过JS异步获取数据并动态向select添加option后，界面往往无法及时更新。这是因为Layui对原生表单元素进行了隐藏和美化，动态修改DOM后需要手动触发渲染。本文介绍通过调用form.render()方法重新渲染表单元素，解决动态添加选项不显示或更新滞后的问题。
问题描述
一、问题
在使用Layui框架开发时，通过点击按钮触发JS脚本异步请求后台接口获取JSON数据，并将这些数据渲染到select下拉框中。虽然接口数据获取正常，但页面中的select选项未能及时更新显示。
具体使用的代码如下：
<div class="main layui-clear">
<div class="fly-panel" pad20>
<h2 class="page-title">发布帖子</h2>
<div class="layui-form layui-form-pane">
<form method="post">
<div class="layui-form-item">
<label for="L_title" class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" id="L_title" name="title" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<div class="layui-input-block">
<textarea id="L_content" name="content" placeholder="请输入内容" class="layui-textarea fly-editor"
style="height: 260px;"></textarea>
</div>
<label for="L_content" class="layui-form-label" style="top: -2px;">描述</label>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">标签选择框</label>
<div class="layui-input-block">
<div class="layui-input-inline" onclick="">
<script id="labels" type="text/html">
{{# layui.each(d.data, function(index,item){ }}
<option value="{{item.id}}">{{item.name}}</option>
{{# }); }}
</script>
<select name="modules" lay-search="" id="label_select" name="labelId">
</select>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-filter="*" lay-submit>立即发布</button>
</div>
</form>
</div>
</div>
</div>修改后的JS脚本如下（已添加关键修复代码，详见下文提示）：
动态渲染修复方案
<script>
layui.use(['form', 'laytpl', 'layedit'], function () {
var form = layui.form,
layedit = layui.layedit,
layer = layui.layer,
laytpl = layui.laytpl;
//添加option
$.get(quark_label_getall_api, function (data) {
data = $.parseJSON(data);
if (data.status == 200) {
var tpl = $("#labels").html();
laytpl(tpl).render(data, function (html) {
$("#label_select").append(html);
var form = layui.form
form.render();
});
} else {
layer.msg(data.error, {icon: 5});
}
});
layedit.set({
uploadImage: {
url: quark_upload_api,
type: 'post' //默认post
}
});
var content = layedit.build('L_content'); //建立编辑器
form.on('submit(*)', function (data) {
var layeditval = layedit.getContent(content);
if (layeditval == "" || layeditval == undefined || layeditval == null) {
layer.msg("输入的内容不能为空", {icon: 7});
return false;
}
$.post(quark_posts_add_api, {
title: data.field.title,
content: layedit.getContent(content),
labelId: data.field.labelId,
token: getCookie()
},
function (data) {
//data=$.parseJSON(data);
if (data.status == 200) {
layer.msg("发布成功", {
icon: 1,
time: 1000 //1秒关闭
}, function () {
location.href = "/pages/index";
});
} else if (data.status == 400) {
layer.msg(data.error, {icon: 7});
} else {
layer.msg(data.error, {icon: 5});
}
}, "json");
return false;
});
});
//封装查询参数
function getData(data) {
var param = {};
param.title = data.title;
param.labelId = data.labelId;
param.token = getCookie();
return param;
}
</script>二、解决办法：
Layui会对select、checkbox、radio等原生表单元素进行隐藏，并替换为自定义的美化样式。这一过程依赖于form组件，因此必须加载form模块并执行初始化。同理，导航的Hover效果、Tab选项卡等功能也需依赖element模块。
当通过JS动态向页面添加这些表单元素时，需要手动对表单元素进行重新渲染。具体操作是调用form.render()方法，关键代码示例如下：
layui.use('form', function(){
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
//……
//但是，如果你的HTML是动态生成的，自动渲染就会失效
//因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
form.render();
});执行上述代码后，异步获取的数据即可在select下拉框中正常且及时地显示。
效果展示：
以上关于解决Layui动态添加select选项无效或更新不及时的问题分享完毕，希望能对读者有所帮助。