多克隆選擇菜單使用JQuery提交表單？

Question

即時通訊嘗試做一個簡單的表單，其中有一個選擇菜單與克隆和刪除按鈕，一旦這些選擇菜單中的任何一個改變它必須張貼表單使用.Ajax調用。 它的工作，但有一些問題 HTML

<form action="action.php" method="post" id="LangForm" > 
<div id="fileds"> 
<select name="lang[]" id="lang" class="lang"> 
<option value="">Select</option> 
<option value="arabic">Arabic</option> 
<option value="english">english</option> 
</select> 
</div> 
</form> 
<button class="clone">Clone</button> 
<button class="remove">Remove</button> 
<div id="content"></div> 

JS

$(function(){ 
    var counter = 1; 
    $(".clone").click(function(){ 
     $('#lang').clone().appendTo('#fileds'); 
     counter++ ; 
    }); 
    $(".remove").click(function(){ 
     if (counter > 1) { 
     $('#lang:last').remove(); 
     counter-- ; 
     }  
    }); 
    $('.lang').change(function(){ 
    $.ajax({type:'POST', 
     url: 'action.php', 
     data:$('#LangForm').serialize(), 
     success: function(response) { 
     $('#content').html(response); 
    } 
    }); 
    }); 
}); 

它有2個問題 第一次當我點擊刪除按鈕就先刪除原來的選擇菜單，然後克隆一個，並保持最後一個克隆我需要的是先刪除克隆的菜單，並保留原來的一個

第二個問題的提交表單只有當原始菜單改變我需要的是提交表單每當任何菜單改變原始或克隆。下面 是從動作PHP頁面的PHP代碼它的東西簡單只是爲了顯示結果 PHP

<?php 
print_r ($_POST['lang']); 
?> 

感謝

Answer 1

HTML：

<form action="action.php" method="post" id="LangForm" > 
<div id="fileds"> 
    <select name="lang[]" class="lang"> 
     <option value="">Select</option> 
     <option value="arabic">Arabic</option> 
     <option value="english">english</option> 
    </select> 
</div> 
</form> 
<button class="clone">Clone</button> 
<button class="remove">Remove</button> 
<div id="content"></div>​ 

注：該字段的ID已經被刪除。

JS：

$(function(){ 

    $(".clone").click(function(){ 
     // clone(true) will clone the element with event handlers intact. 
     $('.lang').last().clone(true).appendTo('#fileds'); 
    }); 

    $(".remove").click(function(){ 
     var selects = $('.lang'); 
     if (selects.length > 1) { 
      selects.last().remove() 
     } 
    }); 
    $('.lang').change(function(e){ 
     // console.log(e) 
     $.ajax({type:'POST', 
       url: 'action.php', 
       data:$('#LangForm').serialize(), 
       success: function(response) { 
       $('#content').html(response); 
      } 
     }); 
    }); 
});​ 

演示：

http://jsfiddle.net/kFB5j/1/