切图网常年专注前端外包开发，这是在近期一次项目切图中遇到的，需要动态添加表单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=&#;&#;></option>&#;+
&#;<option value=&#;&#;></option>&#;+
&#;<option value=&#;&#;></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, 下拉菜单, 表单渲染