Verwenden von jQuery zum dynamischen Hinzufügen von Formularfeldern (oder Feldgruppen) basierend auf einem Dropdown-Wert

Question

Wie der Titel sagt, versuche ich, jQuery eine Reihe zusätzlicher Feldsets basierend auf dem in einem Dropdown-Feld ausgewählten Wert hinzuzufügen. Schachtel Wenn beispielsweise die Seite geladen wird, hat das Dropdown-Feld den Standardwert 1, und das Standard-Fieldset wird angezeigt. Wenn der Benutzer nun einen anderen Wert in dieser Dropdown-Liste auswählt, sollte die Anzahl der Feldgruppen durch Klonen entsprechend angepasst werden (ich nehme an, dies wäre die beste Lösung). Hier ist, was ich bisher:

Dropdown-Feld Code ...

<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> 

... die jQuery ändern Zuhörer ...

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

... und die Funktion selbst (es basiert tatsächlich auf einem jQuery-Plugin, das ich dachte, war ein guter Ausgangspunkt für das, was ich brauche):

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. 
    } 
} 

das Objekt, das ist c loned ist etwas wie <fieldset id="item_dup_1"><input><input><input></fieldset>. Ich denke nicht, dass es notwendig ist, auch den vollständigen Code dafür zu zeigen.

Dies wirkt wie ein Charme für die erste Änderung, aber wenn der Benutzer den Wert erneut ändert, ist es, wenn die Dinge schief gehen, und anstatt die richtige Anzahl der Feldsets zeigt es mehr. Es sieht so aus, als würde es die Anzahl der benötigten Fieldsets von Grund auf neu berechnen, abgesehen von der Tatsache, dass Fieldsets bereits hinzugefügt wurden, und das ist, was mein Problem tatsächlich ist. Ich habe auch eine Funktion (hier nicht gezeigt, nur um die Frage klar und so kurz wie möglich zu halten), die dem geklonten Fieldset neue IDs zuweist, um doppelte IDs zu verhindern, und die ohne Probleme funktioniert.

Ich bin überzeugt, dass ich etwas falsch mache, aber ich habe meinen Kopf gegen eine Wand damit seit zwei Tagen geschlagen, versuchend zu finden, was es ohne Glück so überhaupt ist, jede Hilfe würde mehr als geschätzt sein !

Vielen Dank im Voraus!

Answer 1

Ich mag es nicht, die Lösung von Nate B.

• es benötigt ein zusätzliches Containerelement
• alles neu erstellt, so dass Daten verloren gehen eingegeben bereits
• ein Wartungsproblem schafft: HTML-Markup des fieldset dupliziert wird (einmal in HTML, einmal als String für anfügen)
• erzeugt ungültige IDs für die fieldset

012 (ids kann nicht mit einer Zahl beginnen)

Das macht, was Sie wollen und ähnlich wie Sie es getan haben. Behält nur die IDs in einem Datenattribut auf dem ursprünglichen Element bei (anstatt das gesamte Klonobjekt zu behalten, das große Mengen an Speicher verwenden könnte). Hält alle bereits eingegebenen Werte. Erstellt nicht alles neu, wenn Sie z. 3 bis 5. Stattdessen werden nur zwei neue Feldgruppen generiert. Entfernt sie in umgekehrter Reihenfolge, in der sie erstellt wurden.

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

Warum klonen Sie, anstatt nur etwas zu tun (zusammen mit Ihrem aktuellen Ereignis-Listener)?

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

Die count im Fieldset ist, wie Sie die eindeutige ID Problem umgehen kann.