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
Vous devez vous connecter pour publier un commentaire.
Je n'aime pas la solution de Nate B.
Ce fait ce que vous voulez et similaire à ce que vous avez fait. Conserve uniquement les id dans un attribut de données sur l'élément d'origine (au lieu de garder l'ensemble de cloner un objet qui pourrait utiliser de grandes quantités de mémoire). Conserve toutes les valeurs déjà saisies. Ne recréez pas tout, si vous modifiez par exemple de 3 à 5. Au lieu de cela ne génère deux nouvelles balises html fieldsets. Supprime dans l'ordre inverse, ils ont été créés.
C'est peut-être commun de connaissances, mais j'ai trouvé que si les données ont été saisies dans les champs de saisie de la fieldset qui est cloné avant de changer le fieldset comte, les données saisies seront clonés. Faisant un simple clone.find("input").each(function(){jQuery(this).val("")}); après que le clone a été créé va vous donner une propre clone de travailler avec. Espérons que cela permettra de rechange à quelqu'un couple de minutes.
Eh bien c'est plus ou moins commun de connaissances et aussi la façon dont
clone
est censé fonctionner. Le jQueryclone
méthode utilise en interne la normale de la méthode DOMcloneNode(true)
. Vérifiez ici pour une description de la manière dont il se comporte de la w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4Oui, maintenant, il fait sens. Maintenant je peux voir comment cela pourrait être utile si l'on souhaite faire de pré-remplir cloné champs avec des valeurs par défaut - il suffit de remplir l'objet que l'être cloné. Neat !
OriginalL'auteur jitter
Pourquoi êtes-vous le clonage au lieu de simplement faire quelque chose comme ceci (avec votre écouteur d'événement)?
La
count
dans le fieldset est comment vous pouvez gérer l'identifiant unique de la question.Veuillez ne pas tenir compte de mon dernier commentaire. Penser plus à ce sujet, j'ai réalisé que je pouvais il suffit de regarder pour le dernier enfant du conteneur dans lequel l'généré des balises html fieldsets allez et faites un .supprimer (). Un million de mercis !
OriginalL'auteur Nate B