jQuery复制表单元素带源代码共享效果演示

在提交表单时，我们有时会遇到需要重复添加多个相同的表单元素，比如在订单信息中添加多个不同型号的产品，在表单数据中添加新的字段信息等等。此时，我们可以直接在表单中放置一个“添加新项”或“复制”按钮，通过点击按钮复制表单元素。

查看演示下载源代码。

超文本标记语言

本文通过一个例子介绍了一个简单的基于jQuery的元素复制插件，通过调用该插件可以轻松实现元素复制功能。

首先加载jQuery库文件和元素复制插件replicateelement . min . js.

script src=' http : jquery . js '/script script src=' http : copy element . min . js '/script我们假设需要复制用户信息元素，表单的html结构如下：

form id=' my form ' name=' my form ' action=' post . PHP ' method=' post ' field set id=' additional ' label for=' name ' customer name:/labe input id=' name ' name=' name[]。type=' text ' class=' input ' label for=' flag ' customer level:/label select id=' flag ' name=' flag[]' Option disabled=' selected=' '请选择/Option Option value=' 1 ' VIP/Option value=' 2 ' normal/Option/select a href=' JavaScript : void(0)；class=' BTN remove ' remove/a a href=' JavaScript : void(0)；class=' BTN create ' copy/a/field set br/div class=' sub _ BTN ' input type=' submit ' class=' button ' value=' submit '/div/form jQuery。

当我们单击“复制”按钮时，我们复制#additional中的内容，这相当于添加了一个新行。开始时，只显示“复制”按钮。复印后，原件将显示“删除”按钮。单击“删除”删除相应的行。

$(function () { $('#additional '))。replicateElement({ ' class _ remove ' :)。移除'，' class_create':create '，onCreate:函数(el) { el.find('select ')。道具(' DefaultSelected ')；el.find('。输入')。val(“”)；} });});我们还可以使用onCreate()回调函数来定义成功复制后新添加的表单元素的属性，例如表单元素值或样式。

以上内容是一个具有源代码共享效果的jQuery复制表单元素的演示，供大家分享，希望对大家有所帮助。