如何在表单中创建动态输入？答案

【问题标题】：how to create dynamic inputs in a form?如何在表单中创建动态输入？
【发布时间】：2013-02-04 15:57:27
【问题描述】：

<form id="myForm">

<select name="team_home" id="team_home_0">
    <option></option>
    <option value="italy">italy</option>
    <option value="spain">spain</option>
    <option value="germany">germany</option>
    <option value="france">france</option>
    <option value="portugal">portugal</option>
    <option value="england">england</option>
</select>
<input type="text" id="result_0" />
<select name="team_visit" id="team_visit_0">
    <option></option>
    <option value="italy">italy</option>
    <option value="spain">spain</option>
    <option value="germany">germany</option>
    <option value="france">france</option>
    <option value="portugal">portugal</option>
    <option value="england">england</option>
</select>
</form>

关键是得到这样的输出：

每当一整行输入完成时，就应该“出现”一个新的空输入行来执行相同的过程。它永无止境（动态创造），因此团队和结果可以无限重复。

我知道我应该使用 jQuery，但我不知道该怎么做。

FIDDLE

【问题讨论】：

code.google.com/p/jqformhelper
stackoverflow.com/questions/10385484/…
可能重复：stackoverflow.com/questions/2145012/…
这是同一种形式吧？这使得确定用户何时完成变得困难，为什么不在用户通过on('click', function(){$('#formcontainer').append(formstring);});“提交”行之后为每一行附加一个新表单
哎呀，表格一样，让我编辑

标签： jquery forms

【解决方案1】：

这里有一些 ID 增量的开始。您可以看看这是否有助于您入门。

http://jsfiddle.net/kmd97/Vk5xJ/

function appendTo(index) {
     var s = a new row of inputs with dynamic index
     $("#container").append(s);
     addClick(index);
 }

【讨论】：

【解决方案2】：

这是一个开始。您需要对其进行增强以增加组 ID、重置输入等。

http://api.jquery.com/clone

http://jsfiddle.net/6hLy9/9

<div id="wrapper">
    <div id="group1" class="group">
        <select name="team_home" class="team_home" id="team_home_0">
            <option></option>
            ...
        </select>
        <input type="text" class="result" id="result_0" />
        <select name="team_visit" class="team_visit" id="team_visit_0">
            <option></option>
            ...
        </select>
    </div>
</div>

$('select, input').on('change', function () {
    var emptyEls = false;
    var thisEl = $(this).parents('.group');
    $(this).siblings().each(function () {
        if ($(this).val() == '') {
            emptyEls = true;
        }
    });
    if (emptyEls == false) {
        $(thisEl).clone().appendTo('#wrapper');
    }
});

【讨论】：