jQuery複製表單元素附原始碼分享效果示範_jquery

我們在提交表單時，有時會遇到需要重複添加多個相同表單元素，如訂單資訊中需要添加多個不同型號的產品、表單資料中新增欄位資訊等。這時候我們可以在表單中直接放置一個「新增一項」或「複製」按鈕，透過點擊按鈕即可實現複製表單元素。

查看示範 下載原始碼

HTML

本文我們透過實例介紹一款簡單的基於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/> 
    <div class="sub_btn"> 
      <input type="submit" class="button" value="提交"> 
    </div> 
</form> 

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複製表單元素附源碼分享效果演示，希望對大家有幫助。