我們在提交表單時，有時會遇到需要重復添加多個相同表單元素，如訂單信息中需要添加多個不同型號的產品、表單數據中新增字段信息等。這個時候我們可以在表單中直接放置一個“新增一項”或“復制”按鈕，通過點擊按鈕即可實現復制表單元素。
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復制表單元素附源碼分享效果演示，希望對大家有所幫助。
新聞熱點
疑難解答
