Usando jQuery para añadir dinámicamente campos de formulario (o conjuntos de campos) en base a un valor cuadro desplegable

Question

Como dice el título, lo que estoy tratando de hacer es tener jQuery añadir una serie de conjuntos de campos adicionales en función del valor seleccionado en un desplegable caja de abajo. Por ejemplo, cuando se carga la página, el menú desplegable tiene un valor predeterminado de 1 y se muestra el conjunto de campos predeterminado. Ahora, si el usuario selecciona un valor diferente en ese menú desplegable, el número de conjuntos de campos se debe ajustar en consecuencia, a través de la clonación (supongo que esta sería la mejor solución). Esto es lo que tengo hasta ahora:

desplegable cuadro de código ...

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

... el cambio oyente jQuery ...

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

... y la propia función (en realidad se basa en un plugin de jQuery que pensé que era un buen punto de partida para lo que necesito):

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

El objeto que está siendo c loned es algo así como <fieldset id="item_dup_1"><input><input><input></fieldset>. No creo que sea necesario mostrar el código completo para ello también.

Esto funciona como un amuleto para el primer cambio, pero si el usuario cambia el valor de nuevo, es cuando las cosas van mal, y en lugar de mostrar el número correcto de conjuntos de campo, se muestra más. Parece que se está calculando el número de conjuntos de campo necesarios comenzando desde cero, sin tener en cuenta el hecho de que los conjuntos de campo ya se han agregado, y este es realmente mi problema. También tengo una función (no se muestra aquí solo para mantener la pregunta clara y lo más breve posible) que asigne nuevos ID al conjunto de campos clonado para evitar ID duplicados y que funcione sin problemas.

Estoy convencido de que estoy haciendo algo mal, pero he estado golpeando mi cabeza contra una pared con esto durante dos días, tratando de encontrar lo que es sin suerte en absoluto, cualquier ayuda sería más que apreciada !

¡Gracias de antemano!

Answer 1

no me gusta la solución de Nate B.

• que necesita un elemento contenedor adicional
• recrea todo, perdiendo así ya entró
• crea un problema de mantenimiento: Formato HTML de la fieldset se duplica (una vez en HTML, una vez como cadena para agregar)
• crea de ID no válido para los conjuntos de campos (de ID no puede comenzar con un número)

Esto hace lo que quiere y es similar a lo que hizo. Mantiene solo los identificadores en un atributo de datos en el elemento original (en lugar de mantener todo el objeto clonado que podría usar cantidades masivas de memoria). Mantiene todos los valores ya ingresados. No recrea todo si cambias de, por ejemplo, 3 a 5. En su lugar, solo genera dos nuevos conjuntos de campo. Los quita en orden inverso donde fueron creados.

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

¿Por qué está clonando en lugar de hacer algo como esto (junto con su oyente de eventos actual)?

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

El count en el grupo de campos es como se puede manejar el tema único de identificación. datos