欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery復(fù)制表單元素附源碼分享效果演示

 更新時間:2015年09月30日 12:11:45   投稿:mrr  
當(dāng)我們遇到提交表單時,需要我們重復(fù)添加好幾個表單,在訂單表格中添加多個不同型號的產(chǎn)品信息。這個時候有復(fù)制表單表單按鈕,也就是新增一項,通過點擊復(fù)制按鈕來實現(xiàn)新增一項,怎么實現(xiàn)的呢?下面小編跟大家分享,需要的朋友的朋友可以參考下

我們在提交表單時,有時會遇到需要重復(fù)添加多個相同表單元素,如訂單信息中需要添加多個不同型號的產(chǎn)品、表單數(shù)據(jù)中新增字段信息等。這個時候我們可以在表單中直接放置一個“新增一項”或“復(fù)制”按鈕,通過點擊按鈕即可實現(xiàn)復(fù)制表單元素。

查看演示 下載源碼

HTML

本文我們通過實例介紹一款簡單的基于jQuery的元素復(fù)制插件,通過調(diào)用該插件輕松實現(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">客戶級別:</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">復(fù)制</a> 
    </fieldset> 
    <br/> 
    <div class="sub_btn"> 
      <input type="submit" class="button" value="提交"> 
    </div> 
</form> 

jQuery

我們點擊“復(fù)制”按鈕時,將#additional里的內(nèi)容進(jìn)行復(fù)制,相當(dāng)于新增一行,初始的時候只顯示“復(fù)制”按鈕,復(fù)制完后,原來的那條則顯示“移除”按鈕,點擊“移除”則可將對應(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ù)制表單元素附源碼分享效果演示,希望對大家有所幫助。

相關(guān)文章

最新評論