圖網常年專注前端外包開發，這是在近期一次項目切圖中遇到的，需要動態添加表單select元素，用到了layui插件，而layui對于一些常用表單元素比如下拉菜單，復選框，單選等都是有做美化的，這樣好處就是好看，缺點是需要渲染，以及事件定義需要基于layui提供的方法來做，造成使用成本增加，不過對于layui上手很熟的人來說，基本影響不大。

動態添加的select元素需要進行渲染form.reander()，這樣一來會導致整個表單的元素都被渲染，最直接的影響就是如果表單中select下拉菜單等有數據的時候，在渲染的這一刻數據就被清空了，這也很好理解，那么就需要找到一個能夠局部更新的方法，如下：

<div class="layui-form" lay-filter="test1">

<select></select>

</div>

【JavaScript】

form.render('select', 'test1'); //更新 lay-filter="test1" 所在容器內的全部 select 狀態

//……

確保代碼能夠生效，這兩處必須要加入：

<div class=”layui-form” lay-filter=”test1″>

1、要加這個樣式：class=”layui-form”

2、要加這個屬性：lay-filter=”test2″

但是這樣依舊無法解決，只對于js動態新增的select元素進行form渲染，對于前面的代碼進行改良就可以了，代碼如下：

$('.add').click(function(){
var timestamp = new Date().getTime();
$('#followlist').append('<div class="layui-form-item layui-row layui-form" lay-filter="t'+timestamp+'" >'+
'<div class="layui-col-md10">'+
'<div class="layui-item">'+
'<label class="layui-form-label"></label>'+
'<div class="layui-input-block">'+
'<div class="layui-input-inline">'+
'<select name="">'+
'<option value="">請選擇</option>'+
'<option value="">1111</option>'+
'<option value="">2222</option>'+
'<option value="">3333</option>'+
'</select>'+
'</div>'+
'<div class="layui-input-inline">'+
'<select name="">'+
'<option value="">請選擇</option>'+
'<option value="">aaaa</option>'+
'<option value="">bbbb</option>'+
'<option value="">cccc</option>'+
'</select>'+
'</div>'+
'<div class="layui-input-inline" style="width: 100px;">'+
'<button class="layui-btn followdel " type="button">'+
'<i class="layui-icon layui-icon-close" style="color: #fff;"></i>'+
'</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
//form.render('select', 'test2');
form.render('select', 't'+timestamp);
return false;
})

標簽：form.render, layadmin, layui, select, 下拉菜單, 表單渲染

font-family: "firacode-retina","Source Han Sans CN";
font-size:16px;