您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“jQuery怎么复制表单元素”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jQuery怎么复制表单元素”吧！
我们在提交表单时，有时会遇到需要重复添加多个相同表单元素，如订单信息中需要添加多个不同型号的产品、表单数据中新增字段信息等。这个时候我们可以在表单中直接放置一个“新增一项”或“复制”按钮，通过点击按钮即可实现复制表单元素。
本文我们通过实例介绍一款简单的基于jQuery的元素复制插件，通过调用该插件轻松实现元素复制功能。
首先载入jQuery库文件和元素复制插件duplicateElement.min.js。
<script src="jquery.js"></script>
<script src="duplicateElement.min.js"></script>
我们假设需要复制用户信息元素，表单html结构如下：
<form id="myform" name="myform" action="post.php" method="post">
<fieldset id="additional">
<label for="name">客户姓名：</label>
<input id="name" name="name[]" type="text" class="input" >
<label for="flag">客户级别：</label>
<select id="flag" name="flag[]">
<option disabled="" selected="">请选择</option>
<option value="1">VIP</option>
<option value="2">普通</option>
</select>
<a href="javascript:void(0);" class="btn remove">移除</a>
<a href="javascript:void(0);" class="btn create">复制</a>
</fieldset>
<br/>
<p class="sub_btn">
<input type="submit" class="button" value="提交">
</p>
</form>
我们点击“复制”按钮时，将#additional里的内容进行复制，相当于新增一行，初始的时候只显示“复制”按钮，复制完后，原来的那条则显示“移除”按钮，点击“移除”则可将对应的行移除。
$(function () {
$('#additional').duplicateElement({
"class_remove": ".remove",
"class_create": ".create",
onCreate: function (el) {
el.find("select").prop('defaultSelected');
el.find(".input").val('');
}
});
});
我们还可以通过onCreate()回调函数来定义复制成功后，新增的表单元素的属性，如表单元素值或样式等。
感谢各位的阅读，以上就是“jQuery怎么复制表单元素”的内容了，经过本文的学习后，相信大家对jQuery怎么复制表单元素这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。