Javascript 动态创建多个组

在表单上，客户可以创建多个组。每个组都有相同的输入字段。如果客户单击“+附加组”，那么将通过jQuery动态创建附加组（html通过AJAX调用下载）

下面是示例html。每个

ul

标签都是一个组。在组

ul

中，每个输入字段包括一个组号字段。像这样：

foo_1

，

foo_2

current_group

是一个隐藏字段，用于跟踪组的总数

如果单击了

add_group

按钮，jQuery将从

current_group

获取组总数，然后动态获取附加组

应该这样做吗

此外，如果客户在完成表单时单击“提交”按钮，由于PHP验证错误，表单可能会返回到同一页面。我不想再次失去动态html组。如何解决这个问题

<h2> Group One </h2>
<ul class="Form">
    <li>
        <label>Foo</label>
        <select name='foo_1'>
                <option value='1'>One</option>
                <option value='2'>Two</option>
                <option value='3'>Three</option>
        </select>
    </li>
   <li>
        <label>Bar</label>
        <select name='bar_1'>
                <option value='car'>Car</option>
                <option value='bike'>Bike</option>
                <option value='van'>Van</option>
        </select>
    </li>
<ul>

<h2> Group Two </h2>
<ul class="Form">
    <li>
        <label>Foo</label>
        <select name='foo_2'>
                <option value='1'>One</option>
                <option value='2'>Two</option>
                <option value='3'>Three</option>
        </select>
    </li>
   <li>
        <label>Bar</label>
        <select name='bar_2'>
                <option value='car'>Car</option>
                <option value='bike'>Bike</option>
                <option value='van'>Van</option>
        </select>
    </li>
<ul>

<input type='hidden' id='current_group' value='2' />
<input type='button' id='add_group' value='+ Additional Group' />

第一组


福
一个
两个
三


酒吧
汽车
自行车
厢式货车


第二组


福
一个
两个
三


酒吧
汽车
自行车
厢式货车

做一件事有几种方法。这就是你的逻辑。如果不犯错误，它应该是有效的

无论何时提取和显示新组，都要保留一个名为

group\u id[]

您将收到阵列中的所有组ID。您可以从$\u REQUEST['group\u id']访问该数组（您可以根据代码使用$\u POST或$\u GET）

---

现在，无论何时提交页面，请检查用户提交的组ID。您还可以接收下拉列表值。如果您需要再次显示这些组，您可以使用

$\u REQUEST['group\u ids']

从数据库中获取它，并通过将当前值与用户选择的值进行比较来保持选择正确的选项。

如果第一组HTML元素已经存在，您可以始终使用jQuery来复制元素，而不是调用服务器。您需要找到元素并替换前面提到的名称

jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem"); 

以更可读的格式

var count = 1;
function addRow(){
    count++;
    var newFormElems = jQuery(".Form").clone();  //clone the form
    var selects = newFormElems.find("select");  //find the selects
    selects.eq(0).prop("name", "foo_" + count);  //rename first
    selects.eq(1).prop("name", "bar_" + count);  //rename second
    newFormElems.appendTo("#someElem");   //add to the page
}

重做命名函数的另一种方法是增加数字：

newFormElems.find("select").each( 
    function(){        
        this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)});
    }
);

处理动态形式的最佳方法是什么？您可以使用Ajax提交数据，或者在验证后使用php代码写出表单