javascript - jqueryフォームのajax送信でフォーム要素を複製する

Question

フォームに SELECT 要素を動的に追加してから、ajax フォーム送信用の JQuery フォーム プラグインを使用して送信しています。(1) SELECT をフォームに追加し、(2) SELECT を DIV 内に配置し、(3) ajax 呼び出しを適切に使用してフォームを送信します。私は3つすべてを行うことができないようです！

<form name="mainForm" id="mainForm" method="POST" action="fellowRight.php">
  ...various working form elements

<div class="field_wrapper">
  </div>

  </form>

上記のコードは、使用中のフォームのスニペットです。次に、以下のようにいくつかの選択要素を動的に追加します

 $(addFormElementButton).click(function(){ 
     var fieldHTML = '<select required name="ABC" ><option value="LT">Left</option><option selected value="RT">Right</option></select>';          
     $('.field_wrapper'); .append(fieldHTML); // Add field html
     $('select[name=ABC]').appendTo('#mainForm');
  }

問題は、意図した div " .field_wrapper" ではなく、要素がフォームに「追加」されることです (したがって、意図した DIV の外に表示されます)。appendTo を省略しても正しくフォーマットできますが、select はフォームにリンクされなくなります。

AppendTo コードを省略し、代わりに要素にform="mainForm"呼び出しを追加すると、<select>正しくフォーマットされ、正しく送信されます。ただし、JQUERY FORM (.ajaxForm) を介して送信されたフォーム データで、この特定の SELECT 要素が重複しています。

Jqueryフォームを使用せずにSELECT要素をフォームにリンクする方法はありますappendToか、form=またはJqueryフォームの使用を忘れるべきですか