Layui表单点击无限增加多个input或select，给输入框增加功能，实现表单循环取值ajax提交

zherose

已于 2022-04-12 14:33:57 修改

阅读量4.1k

点赞数 1

分类专栏： layui 文章标签： jquery layui js

于 2021-04-14 20:10:23 首次发布

本文链接：https://blog.csdn.net/zherose/article/details/115707222

版权

本文介绍了使用Layui通过点击按钮动态增加input和select，并结合lay-search和laydate实现表单功能。同时，阐述了如何在提交时循环取值或序列化数据，以方便后台处理多个数据的场景。示例代码和方法旨在帮助开发者解决问题。

摘要由CSDN通过智能技术生成

Layui表单实现点击按钮后无限增加多个input输入框或select，给输入框增加功能（lay-search模糊搜索、laydate时间选择控件），并且表单提交循环取值，或者序列化表单数据再提交。

我也是参考了很多的代码，记录一下。希望能帮到别人。如果你有更好的方法，欢迎补充，谢谢。

1、按钮

<button class="layui-btn" onclick="insertInput()"><i class="layui-icon layui-icon-add-1"></i>增加输入框</button>

2、用容器包裹需要复制的表单元素，可以是很多个。给个ID。

<div id="bc"><!-- 复制内容 -->
					<div class="layui-form-item">
                        <label class="layui-form-label">
                            型号</label>
                        <div class="layui-input-inline">
                            <select name="R_Pname" lay-verify="required" lay-search>
								<option value="">快速查找 模糊搜索</option&