elemen borang salin jQuery dengan kesan perkongsian kod sumber demonstration_jquery

Apabila kami menyerahkan borang, kami kadangkala menghadapi keperluan untuk menambahkan beberapa elemen borang yang sama berulang kali, seperti menambahkan berbilang model produk yang berbeza pada maklumat pesanan, menambah maklumat medan baharu pada data borang, dsb. Pada masa ini, kita boleh meletakkan butang "Tambah item" atau "Salin" terus dalam borang dan menyalin elemen borang dengan mengklik butang.

Lihat demo Muat turun kod sumber

HTML

Dalam artikel ini, kami memperkenalkan pemalam salinan elemen berasaskan jQuery yang ringkas melalui contoh Fungsi penyalinan elemen boleh direalisasikan dengan mudah dengan memanggil pemalam ini.

Mula-mula muatkan fail perpustakaan jQuery dan pemalam duplikasi elemen duplicateElement.min.js.

<script src="jquery.js"></script> 
<script src="duplicateElement.min.js"></script> 

Kami menganggap bahawa kami perlu menyalin elemen maklumat pengguna Struktur html borang adalah seperti berikut:

<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

Apabila kita mengklik butang "Salin", kandungan dalam #tambahan akan disalin, yang bersamaan dengan menambah baris baru pada mulanya, hanya butang "Salin" akan dipaparkan Butang "Alih Keluar", klik "Alih Keluar" untuk mengalih keluar baris yang sepadan.

 $(function () { 
    $('#additional').duplicateElement({ 
      "class_remove": ".remove", 
      "class_create": ".create", 
      onCreate: function (el) { 
        el.find("select").prop('defaultSelected'); 
        el.find(".input").val(''); 
      } 
    }); 
  }); 

Kami juga boleh menggunakan fungsi panggil balik onCreate() untuk mentakrifkan atribut elemen borang yang baru ditambah selepas berjaya menyalin, seperti nilai elemen bentuk atau gaya, dsb.

Kandungan di atas ialah elemen borang salinan jQuery dengan demonstrasi kesan perkongsian kod sumber yang dikongsi dengan anda.