jQueryで動的フォームの動的プレビューを作成するには

Question

javascriptとjQueryを使用して次のフォームセクションをクローンする動的フォームがあります。クローニングセクションは私のためにうまく動作します。しかし、選択しているオプションのリストとして別のdivの同じページにフォームの動的プレビューを追加したいとします。

誰かがOption 1を選択した場合には、セクションが追加され、クローン化されたセクションからOption 2を選択している場合、それは

1. Option 1 
2. Option 2 

をプレビューし、セクションが削除された場合でしょうその後

1. Option 1. 

をプレビューします、最初のセクションでプレビューが自動的に更新され、表示されます

1. Option 2. 

どうすればいいですか？

<form id="form"> 
    <div id="sections"> 
     <div class="section"> 
      <select name="form"> 
       <option value="option 1">Option 1</option> 
       <option value="option 2">Option 2</option> 
       <option value="option 3">Option 3</option> 
      </select> 
      <p><a href="#" class='remove'>Remove Section</a></p> 
     </div> 
    </div> 
    <p><a href="#" class='addsection'>Add Section</a></p> 
</form> 

とJavaScript：

var template = $('#sections .section:first').clone(); 
var sectionsCount = 1; 
$('body').on('click', '.addsection', function() { 

    sectionsCount++; 
    var section = template.clone().find(':input').each(function(){ 
     var newId = this.id + sectionsCount; 
     $(this).prev().attr('for', newId); 
     this.id = newId; 

    }).end() 

    .appendTo('#sections'); 
    return false; 
}); 

$('#sections').on('click', '.remove', function() { 
    $(this).parent().fadeOut(300, function(){ 
     $(this).parent().parent().empty(); 
     return false; 
    }); 
    return false; 
}); 

更新：

は、これが私のフォームで作業フィドル例を本当に感謝します。

Answer 1

はプレビュー

<form id="form"> 
    <div id="sections"> 
     <div class="section"> 
      <select name="form" id="MySelect"> 
       <option value="option 1">Option 1</option> 
       <option value="option 2">Option 2</option> 
       <option value="option 3">Option 3</option> 
      </select> 
      <p><a href="#" class='remove'>Remove Section</a></p> 
     </div> 
    </div> 
    <p><a href="#" class='addsection'>Add Section</a></p> 

    <div class="MyPreview"> 

    </div> 

</form> 

がクローニングセクションには、私のために正常に動作したいフォームに<div>を追加します。

このような何かを試してみてくださいdivの

$(".MyPreview").append("<p>1. Option 1. </p>"); 

にクローン化されたセクションを追加クローニング、私はまだこれをチェックしていない一方で、

var i = 1; 
$('body').on('click', '.addsection', function() { 

    sectionsCount++; 
    var section = template.clone().find(':input').each(function(){ 
     var newId = this.id + sectionsCount; 
     $(this).prev().attr('for', newId); 
     this.id = newId; 

    }).end() 

    .appendTo('#sections'); 

    var e = document.getElementById("MySelect"); 
    var MyValue = e.options[e.selectedIndex].value; 
    var MyOption = e.options[e.selectedIndex].text; 

    $(".MyPreview").append("<div class='"+ MyValue +"'>" + i + "." + MyOption +". </p>"); 
    i++; 

    return false; 
}); 

はにクラスとしてオプションの値を追加しますdivを削除するにはdivを削除するクラスを使用します。

$(".MyValue").remove(); 


$('#sections').on('click', '.remove', function() { 
    $(this).parent().fadeOut(300, function(){ 
     $(this).parent().parent().empty(); 
     return false; 
    }); 

    var e = document.getElementById("MySelect"); 
    var MyValue = e.options[e.selectedIndex].value; 

    $(".MyValue").remove(); 

    return false; 
}); 

あなたは