基于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()回调函数来定义复制成功后，新增的表单元素的属性，如表单元素值或样式等。

推荐专题

最新下载

热门教程

基于jQuery复制表单元素的例子

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程