Layui表单Select动态渲染（原创）
Layui select 下拉框动态渲染
这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对，第一次始终不能渲染，而且随着 select 个数增多渲染次数也要增加，然后回来剥离一个 demo 结果又可以，白白浪费好久时间，最终发现还是有几处不对。
直接上代码把：
html 代码：
<button type=”button” class=”layui-btn” id=”btn1″>点我</button>
<form action=”” class=”layui-form” id=”formItem” style=”display: none;padding: 20px 10px;”>
<div class=”layui-form-item”>
<label class=”layui-form-label”>选择框</label>
<div class=”layui-input-block”>
<select name=”city” lay-verify=”required” id=”select11″>
</select>
</div>
</div>
<div class=”layui-form-item”>
<label class=”layui-form-label”>选择框</label>
<div class=”layui-input-block”>
<select name=”city” lay-verify=”required” id=”select22″>
</select>
</div>
</div>
</form>
JS 代码
var form = layui.form;
var $ = layui.jquery;
$(‘#btn1’).click(function() {
layer.open({
type: 1,
shade: false,
title: “提示”, //不显示标题
content: $(‘#formItem’),
area: [‘50%’, ‘500px’],
success: function(layero, index) {
let _html = ”
for (let i = 0; i < 5; i++) {
_html += ‘<option>’ + i + ‘</option>’;
}
console.log($(layero).find(‘#select11’))
$(layero).find(‘#select11’).append(_html);
$(layero).find(‘#select22’).append(_html);
console.log(layero, index);
form.render(‘select’);
},
cancel: function() {
layer.msg(‘捕获就是从页面已经存在的元素上，包裹 layer 的结构’, {
time: 5000,
icon: 6
});
}
});
});
注意事项：
1. 添加的时候时，for 循环之添加 html 元素，不做渲染，
2. 查找元素方法： $(layero).find(‘#select11’)是这样的，针对的是 layer 弹窗中
3. 最后记得渲染，form.render(‘select’);
4. 如果不显示记得添加这句话：var form = layui.form;
好了，不想吐槽 wordpress 这个编辑器了，太不好编辑了。那位好心人有啥好的编辑器推荐个噻。
