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

Question

<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

Answer 1

这是一个开始。您需要增强它以增加组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');
    }
});

Answer 2

这是一个小提琴，其中包含ID增量的一些开头。你可以看看这是否有助于你开始。

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

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