Layui表单Select动态渲染(原创)

学习教程 2019-08-26 88次浏览 0个评论
文章目录[隐藏]

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 这个编辑器了,太不好编辑了。那位好心人有啥好的编辑器推荐个噻。

喜欢 (3)