Utilisation de jQuery pour ajouter dynamiquement des champs de formulaire (ou balises html fieldsets) basée sur une valeur de la zone de liste déroulante

Comme le dit le titre, ce que j'essaie de faire c'est d'avoir jQuery ajouter un certain nombre d'autres balises html fieldsets basée sur la valeur sélectionnée dans une liste déroulante. Par exemple, lorsque le chargement de la page, le menu déroulant a une valeur par défaut de 1, et la valeur par défaut fieldset est affiché. Maintenant, si l'utilisateur sélectionne une valeur différente dans cette liste déroulante, le nombre de balises html fieldsets doit être ajustée en conséquence, par clonage (je suppose que ce serait la meilleure solution). Voici ce que j'ai à ce jour:

Zone de liste déroulante 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>

... le jQuery changement écouteur ...

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

... et la fonction elle-même (il est en fait basé sur un plugin jQuery qui je pensais était un bon point de départ pour ce dont j'ai besoin):

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

L'objet qui est cloné est quelque chose comme <fieldset id="item_dup_1"><input><input><input></fieldset>. Je ne pense pas qu'il est nécessaire de montrer le code complet pour elle aussi.

Cela fonctionne comme un charme pour le premier changement, mais si l'utilisateur modifie la valeur de nouveau, c'est quand les choses vont mal, et au lieu de montrer le bon nombre de balises html fieldsets, il montre plus. On dirait qu'il est en train de calculer le nombre de balises html fieldsets nécessaire de partir de zéro, sans tenir compte du fait que les balises html fieldsets ont déjà été ajoutés, et c'est ce que mon problème est en réalité. J'ai aussi une fonction (non montré ici juste pour garder la question claire et aussi court que possible) que les signes de nouveaux Identifiants à la cloné fieldset pour éviter Id en double et qui fonctionne sans accroc.

Je suis convaincu que je suis en train de faire quelque chose de mal, mais j'ai été frapper ma tête contre un mur, et ce, à deux jours maintenant, en essayant de trouver ce qu'il est avec pas de chance que ce soit de la sorte, toute aide serait plus qu'apprécié !

Merci d'avance !

OriginalL'auteur Valentin Flachsel | 2009-12-12