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

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，但我不知道该怎么做。

小提琴

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);
 }