js下拉列表表单控件的自动填写思路
我们熟悉的标准HTML输入控件包括input,select,textarea等；比如通过改变input的value属性值，就可输入内容到文本输入框中。有些网页表单为了实现特殊的效果和功能，可以不使用这些控件，通过客户端脚本生成特殊的输入方式。手工填表不受影响，如果自动填表就需要使用特殊的方式。
非标准下拉列表框填写示例.png
方法一：手工填表后，观察源码变化，发现填写的内容出现在<span>a5</span>元素中。那么我们填表的思路就是直接修改这个元素的值。获取span元素，“填写”它的text文本内容为a3，可以看到网页也对应的发生变化。但提交表单时，如果是非input元素，可能无法提交填写的值，需进一步测试。
方案二：使用自动点击操作，完全跟人工填表步骤一样，先点击下拉箭头，等待0.1秒，然后在选项中点击对就的选项元素。几乎所有下拉列表控件都可以用这种方法填写。
layui下拉菜单form.render局部刷新方法亲测有效
切图网常年专注前端外包开发，这是在近期一次项目切图中遇到的，需要动态添加表单select元素，用到了layui插件，而layui对于一些常用表单元素比如下拉菜单，复选框，单选等都是有做美化的，这样好处就是好看，缺点是需要渲染，以及事件定义需要基于layui提供的方法来做，造成使用成本增加，不过对于layui上手很熟的人来说，基本影响不大。
动态添加的select元素需要进行渲染form.reander()，这样一来会导致整个表单的元素都被渲染，最直接的影响就是如果表单中select下拉菜单等有数据的时候，在渲染的这一刻数据就被清空了，这也很好理解，那么就需要找到一个能够局部更新的方法，如下：
【JavaScript】
确保代码能够生效，这两处必须要加入：
<div class=”layui-form” lay-filter=”test1″>
1、要加这个样式：class=”layui-form”
2、要加这个属性：lay-filter=”test2″
但是这样依旧无法解决，只对于js动态新增的select元素进行form渲染，对于前面的代码进行改良就可以了，代码如下：
标签：form.render, layadmin, layui, select, 下拉菜单, 表单渲染
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
