jQueryを使用して、ドロップダウンボックスの値に基づいてフォームフィールド（またはフィールドセット）を動的に追加する

Question

タイトルが述べているように、jQueryにドロップダウンリストで選択された値に基づいて、ダウンボックス。たとえば、ページが読み込まれると、ドロップダウンのデフォルト値は1になり、デフォルトのフィールドセットが表示されます。ユーザーがそのドロップダウンで別の値を選択した場合、クローン作成によってフィールドセットの数を調整する必要があります（これが最適なソリューションだと思います）。

ドロップダウンボックスのコードが...

<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の変更リスナー...

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

...と機能自体：ここでは私がこれまで持っているものです

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

Cされているオブジェクトを（それは実際に私は私が必要なもののための良い出発点だと思ったjQueryプラグインに基づいています）冗談は<fieldset id="item_dup_1"><input><input><input></fieldset>のようなものです。私はそれについても完全なコードを表示する必要はないと思う。

これは最初の変更の魅力のように機能しますが、ユーザーが値を再度変更すると、状況が悪くなり、正しい数のフィールドセットを表示するのではなく、より多くの情報が表示されます。既にフィールドセットが追加されているという事実を無視して、ゼロから始めて必要なフィールドセットの数を計算しているように見えます。これが私の問題です。私はまた、IDを重複しないように複製するフィールドセットに新しいIDを割り当て、障害を起こすことなく動作する機能（ここでは質問を明確かつ短く保つためには表示されていません）を持っています。

私は間違ったことをしていると確信していますが、私は今この2日間壁に頭を打っています。運が何であるかを見つけようとしています。 ！

ありがとうございます！

Answer 1

私はそれは、追加のコンテナ要素

はすべてを再作成必要がありますので、データがすでに

に入っ失うことは、メンテナンスの問題作成ネイトB.

• のソリューションを好きではない：のHTMLマークアップをフィールドセットが重複して（一度HTMLで、一度追記のための文字列として）
• はフィールドセットに無効なIDを作成します

012（IDは数字で始めることはできません）

これは、あなたがしたいことを行い、あなたのやり方に似ています。大量のメモリを使用できるクローンオブジェクト全体を保持するのではなく、元の要素のデータ属性にIDのみを保持します。既に入力されたすべての値を保持します。たとえばから変更するとすべてを再作成しません。代わりに2つの新しいフィールドセットを生成します。作成した場所と逆の順序で削除します。

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

なぜこのようなことを（現在のイベントリスナーと一緒に）行うのではなく、クローニングしていますか？

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

フィールドセット内のcountは、一意のIDの問題を処理する方法です。