Bir açılır kutu değeri temel alınarak form alanlarını (veya alanları) dinamik olarak eklemek için jQuery'yi kullanma

Question

Başlıkta da belirttiğim gibi, jQuery, bir damla olarak seçilen değere göre jQuery ek bir dizi alan kümesi eklemektir. aşağı kutu. Örneğin, sayfa yüklendiğinde, açılır menünün varsayılan değeri 1'dir ve varsayılan alan kümesi görüntülenir. Şimdi, kullanıcı bu açılır menüden farklı bir değer seçerse, klonlama yoluyla alan takımlarının sayısı buna göre ayarlanmalıdır (sanırım bu en iyi çözüm olacaktır). İşte ben bugüne kadar ne var:

Açılır kutu kodu ...

<select id="itemCount" name="itemCount"> 
<option value="1">1 item</option> 
<option value="2">2 items</option> 
<option value="3">3 items</option> 
<option value="4">4 items</option> 
<option value="5">5 items</option> 
<option value="6">6 items</option> 
</select> 

... jQuery değişiklik dinleyici ...

$(document).ready(function() { 
$("#itemCount").change(function(){ 
    var itemCountVal = jQuery(this).val(); 
    $("#item_dup_1").fieldsManage(itemCountVal); 
}); 
}); 

... ve fonksiyon kendisi

jQuery.fn.fieldsManage = function (number) { 
    var clone, 
    objTemplate = source.clone(true), 
    source = jQuery(this), 
    maxClones = number - 1, 
    clones = []; 

    if (clones.length < maxClones) { 
    while (clones.length < maxClones) { 
     clone = objTemplate.clone(true).insertAfter(clones[clones.length - 1] || source); 
     clones.push(clone); 
    } 
    } 

    if (clones.length > maxClones) { 
    // Fieldsets removal function goes here. 
    } 
} 

nesne olma c: (aslında Neye ihtiyacım için iyi bir başlangıç ​​noktası olduğunu düşündüm bir jQuery eklentisi dayanmaktadır) Yanlız <fieldset id="item_dup_1"><input><input><input></fieldset> gibi bir şeydir. Bunun için de tam kodu göstermenin gerekli olmadığını düşünüyorum.

Bu, ilk değişiklik için bir çekicilik gibi çalışır, ancak kullanıcı değeri tekrar değiştirirse, işler yanlış gittiğinde ve doğru sayıda alan kümesini göstermek yerine, daha fazlasını gösterir. Çizelgelerin zaten eklenmiş olduğu gerçeğini göz ardı ederek, sıfırdan başlayarak gerekli olan alan adedinin sayısını hesaplıyor gibi görünüyor ve bu benim sorunumun gerçekte ne olduğu. Aynı zamanda (sadece soruyu açık ve mümkün olduğunca kısa tutmak için burada gösterilmemiştir), klonlanmış alan kümesine yeni kimlikleri atayan ve kimlikleri aksatmadan çalışan bir işleve sahibim.

Yanlış bir şey yaptığım konusunda ikna oldum, ama iki gün boyunca kafamı bir duvara çarptırarak, bunun ne şansı olduğunu anlamaya çalışıyorum, herhangi bir yardım, takdir edilenden daha fazla olacaktır !

Şimdiden teşekkürler!

Answer 1

Nate B. çözüm sevmiyorum

• o
• herşeyi yeniden ek bir konteyner elemanı ihtiyacı
  böylece kaybetmeden veriler zaten
• bir bakım problemi yaratır girmiş fieldset yineleniyor (bir kez HTML kez ekleme yapılması için dizesi olarak)
• fieldsets için geçersiz kimliklerini oluşturur

012 (id en bir sayı ile başlayamaz)

Yaptıklarınız ve yaptığınız şeye benzer. Özgün öğe üzerindeki bir veri özniteliğinde yalnızca kimlikleri tutar (büyük miktarda bellek kullanabilen tüm klon nesnesini tutmak yerine). Girilen tüm değerleri saklar. Ör. 3 ila 5. Bunun yerine sadece iki yeni alan kümesi oluşturur. Onları oluşturulduğu sırada ters sırayla kaldırır.

jQuery.fn.fieldsManage = function (number) { 
    var ele = $(this); 
    var clones = ele.data("clones"); 
    clones = clones ? clones : new Array(ele.attr("id")); 
    if (clones.length < number) { 
     var clone; 
     while(clones.length < number) { 
      clone = ele.clone(true); 
      var id = clones[0]+clones.length; 
      clone.attr("id", id); 
      $("#"+clones[clones.length-1]).after(clone); 
      clones.push(id); 
     } 
    } else { 
     while(clones.length > number) { 
      $("#"+clones.pop()).remove(); 
     } 
    } 
    ele.data("clones", clones); 
} 

$(document).ready(function() { 
    $("#itemCount").change(function() { 
     $("#item_dup_1").fieldsManage(this.value); 
    }); 
}); 

Answer 2

Neden böyle bir şey yapmak yerine (mevcut olay dinleyicinizle birlikte) klonlanıyorsunuz? fieldset içinde count

$(".divWhereTheseGo").empty(); 
var count = 0; 
while (count < maxItems) { 
    $(".divWhereTheseGo").append("<fieldset id=\"" + count + "\">your form info</fieldset>"); 
    count++; 
} 

benzersiz kimliği sorunu işleyebilir nasıl. html işaretlemeyi: