導軌如何以一種形式嵌套？

Question

場景是，我要設計一個Post表格，用來記錄我一頓飯吃的水果，包括picture ， content ，多種fruit 。 模型關系是

Post has_many fruits
Fruit belong_to post

我使用Jquery-ui進行autocomplete ，以幫助用戶輸入自己的水果。 在他們輸入水果標簽后，它將在輸入字段下創建一個標簽。 像這樣

但是，如何以表格形式創建它呢？ 我考慮過動態嵌套表單，但是我不希望有很多表單，我希望只有一個輸入，並且對動態嵌套表單做同樣的事情。

這是github ，如果需要提供更多信息，請告訴我。

Answer 1

 $(document).on('click','#add_fruit',function(e){ e.preventDefault(); addFruitTag(); }); function addFruitTag(){ var content = $('#content').val().trim(); var fruit = $('#fruit').val().trim(); if(content.length <1 || fruit.length < 1){ alert("Please fill content and fruit"); }else{ $('#fruit_tags').append( $('<input>') .attr('type','checkbox') .attr('name','fruits[]') .attr('value',$('#fruit').val()) .prop('checked','true') ) .append( $('<label>') .text($('#fruit').val()) ) .append($('<br>')); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="GET"> Content : <input type="text" id="content" name="content"><br/> Fruit : <input type="text" id="fruit"> <button id="add_fruit">Add Fruit</button><br/> <div id="fruit_tags"> </div> <input type="submit" value="Create Post"> </form> 

注意：我對自動完成插件沒有太多的了解，因此我創建了函數addFruitTag() ，在您調用添加水果哈希標簽的函數的地方調用它。

當您將表單提交到服務器時，您可以通過訪問fruits[]變量來檢索添加的水果，該變量將是一個包含所選水果標簽的數組。