jQuery復(fù)制表單元素附源碼分享效果演示
我們?cè)谔峤槐韱螘r(shí),有時(shí)會(huì)遇到需要重復(fù)添加多個(gè)相同表單元素,如訂單信息中需要添加多個(gè)不同型號(hào)的產(chǎn)品、表單數(shù)據(jù)中新增字段信息等。這個(gè)時(shí)候我們可以在表單中直接放置一個(gè)“新增一項(xiàng)”或“復(fù)制”按鈕,通過點(diǎn)擊按鈕即可實(shí)現(xiàn)復(fù)制表單元素。

HTML
本文我們通過實(shí)例介紹一款簡(jiǎn)單的基于jQuery的元素復(fù)制插件,通過調(diào)用該插件輕松實(shí)現(xiàn)元素復(fù)制功能。
首先載入jQuery庫文件和元素復(fù)制插件duplicateElement.min.js。
<script src="jquery.js"></script> <script src="duplicateElement.min.js"></script>
我們假設(shè)需要復(fù)制用戶信息元素,表單html結(jié)構(gòu)如下:
<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">客戶級(jí)別:</label>
<select id="flag" name="flag[]">
<option disabled="" selected="">請(qǐng)選擇</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">復(fù)制</a>
</fieldset>
<br/>
<div class="sub_btn">
<input type="submit" class="button" value="提交">
</div>
</form>
jQuery
我們點(diǎn)擊“復(fù)制”按鈕時(shí),將#additional里的內(nèi)容進(jìn)行復(fù)制,相當(dāng)于新增一行,初始的時(shí)候只顯示“復(fù)制”按鈕,復(fù)制完后,原來的那條則顯示“移除”按鈕,點(diǎn)擊“移除”則可將對(duì)應(yīng)的行移除。
$(function () {
$('#additional').duplicateElement({
"class_remove": ".remove",
"class_create": ".create",
onCreate: function (el) {
el.find("select").prop('defaultSelected');
el.find(".input").val('');
}
});
});
我們還可以通過onCreate()回調(diào)函數(shù)來定義復(fù)制成功后,新增的表單元素的屬性,如表單元素值或樣式等。
以上內(nèi)容就是給大家分享的jQuery復(fù)制表單元素附源碼分享效果演示,希望對(duì)大家有所幫助。
相關(guān)文章
jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)方法設(shè)置簡(jiǎn)單,一個(gè)是服務(wù)器處理程序是返回json數(shù)據(jù),另一種就是ajax發(fā)送設(shè)置的datatype設(shè)置為jsonp格式數(shù)據(jù)或json格式都可以。這篇文章對(duì)此進(jìn)行了實(shí)例介紹,需要的朋友可以參考下2014-06-06
33個(gè)優(yōu)秀的 jQuery 圖片展示插件分享
這篇文章收集了33個(gè)優(yōu)秀的 jQuery 圖片插件分享給大家。2012-03-03
jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
這篇文章介紹了jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08
jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
這篇文章主要介紹了jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法的應(yīng)用,需要的朋友可以參考下2014-05-05
jquery showModelDialog的使用方法示例詳解
這篇文章主要介紹了window.showModalDialog的使用方法,大家要以參考使用2013-11-11
jQuery實(shí)現(xiàn)動(dòng)畫效果circle實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)畫效果circle的方法,涉及jquery鼠標(biāo)事件及頁面動(dòng)畫操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery解析XML與傳統(tǒng)JavaScript方法的差別實(shí)例分析
這篇文章主要介紹了jQuery解析XML與傳統(tǒng)JavaScript方法的差別,實(shí)例分析了jQuery與javascript解析XML文件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03

