这是因为layui的渲染机制造成的，你在加载的时候是空的，然后你模板获取到之后，已经渲染结束了，所以啥也没有，这个时候我们需要重新渲染一下
//初始化文章分类
function initCate() {
$.ajax({
method: 'GET',
url: '/my/article/cates',
success: function (res) {
if (res.status !== 0) {
return layer.msg('获取分类数据失败！')
}
// 调用模板引擎渲染分类的可选项
var htmlStr = template('tpl-cate', res);
console.log(htmlStr);
$('[name=cate_id]').html(htmlStr);
//为什么没有渲染上去？？？？
//这是因为layui的渲染机制造成的
form.render();
}
})
}
模板和html代码
<form class="layui-form" id="form-search">
<div class="layui-form-item layui-inline">
<select name="cate_id"></select>
</div>
<div class="layui-form-item layui-inline">
<select name="state">
<option value="">所有状态</option>
<option value="已发布">已发布</option>
<option value="草稿">草稿</option>
</select>
</div>
<div class="layui-form-item layui-inline">
<button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button>
</div>
</form>
<script type="text/html" id="tpl-table">
{{each data}}
<tr>
<td>{{$value.title}}</td>
<td>{{$value.cate_name}}</td>
<td>{{$value.pub_date|dataFormat}}</td>
<td>{{$value.state}}</td>
<td>
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</td>
</tr>
{{/each}}
</script>
<!-- 分类可选项的模板结构 -->
<script type="text/html" id="tpl-cate">
<option value="">所有分类</option>
{{each data}}
<option value="{{$value.Id}}">{{$value.name}}</option>
{{/each}}
</script>
标签：cate,渲染,layui,value,ajax,template,each,模板 From： https://www.cnblogs.com/alwaysrun/p/16612396.html