如何在jQuery中爲動態表單創建動態預覽

Question

我有使用javascript和jQuery克隆以下表單部分的動態表單。克隆部分適合我。但是我想在不同的div的同一頁面中添加一個動態的表單預覽，作爲正在選擇的選項列表。

如果有人選擇Option 1將預覽

1. Option 1. 

那麼如果一個部分是從克隆的部分添加並選擇Option 2，它會預覽

1. Option 1 
2. Option 2 

如果一個節已被除去，說第一節，那麼預覽會自動更新並顯示

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; 
}); 

希望它爲你工作