Rumah > hujung hadapan web > tutorial js > elemen borang salin jQuery dengan kesan perkongsian kod sumber demonstration_jquery

elemen borang salin jQuery dengan kesan perkongsian kod sumber demonstration_jquery

WBOY
Lepaskan: 2016-05-16 15:37:38
asal
1579 orang telah melayarinya

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> 
Salin selepas log masuk

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> 
Salin selepas log masuk

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(''); 
      } 
    }); 
  }); 
Salin selepas log masuk

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.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan