最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jQuery复制表单元素的例子
时间:2022-06-25 17:35:59 编辑:袖梨 来源:一聚教程网
我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品、表
单数据中新增字段信息等。这个时候我们可以在表单中直接放置一个“新增一项”或“复制”按钮,通过点击按钮即可实现复制表单元素。
本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能。
首先载入jQuery库文件和元素复制插件duplicateElement.min.js。
我们假设需要复制用户信息元素,表单html结构如下:
jQuery
我们点击“复制”按钮时,将#additional里的内容进行复制,相当于新增一行,初始的时候只显示“复制”按钮,复制完后,原来的那条则显示“移除”按钮,点击“移除”则可将对应的行移除。
$(function () {
$('#additional').duplicateElement({
"class_remove": ".remove",
"class_create": ".create",
onCreate: function (el) {
el.find("select").prop('defaultSelected');
el.find(".input").val('');
}
});
});
我们还可以通过onCreate()回调函数来定义复制成功后,新增的表单元素的属性,如表单元素值或样式等。
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20