Javascript 下拉菜单添加具有相应ID和标签的输入字段

使用Javascript，我创建了一个下拉菜单，可以生成用户选择（1-6）指定的输入字段数。但是，如何使新生成的输入字段的ID和标签与它们在输入字段列表中的位置号相对应？我希望这是有道理的。您将在我的html中看到，我希望动态生成的数字位于[括号]中

html:

<ul>
    <li>
        <label for="id_NOU">Number of Units:</label>
        <select name="NOU" id="id_NOA">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </li>
    <li class="list">
        <label>Unit []</label>
        <input type="text" id="unit[]"></input>
    </li>
</ul>

$(window).load(function () {
    $('#id_NOU').change(function () {
        var total = $(this).val();

        //remove all
        $('.list').each(function (index) {
            if (index != 0) $(this).remove();
        });

        //create new ones
        for (var i = 2; i <= total; i++) {
            $('.list:first').clone().appendTo('ul');
        }
    });
});

单位数量：
1.
2.
3.
4.
5.
6.


单位[]

JavaScript:

<ul>
    <li>
        <label for="id_NOU">Number of Units:</label>
        <select name="NOU" id="id_NOA">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </li>
    <li class="list">
        <label>Unit []</label>
        <input type="text" id="unit[]"></input>
    </li>
</ul>

$(window).load(function () {
    $('#id_NOU').change(function () {
        var total = $(this).val();

        //remove all
        $('.list').each(function (index) {
            if (index != 0) $(this).remove();
        });

        //create new ones
        for (var i = 2; i <= total; i++) {
            $('.list:first').clone().appendTo('ul');
        }
    });
});

$（窗口）。加载（函数（）{
$（'#id_NOU'）。更改（函数（）{
var total=$（this.val（）；
//全部删除
$（'.list'）。每个（函数（索引）{
如果（index！=0）$（this.remove（）；
});
//创造新的
对于（var i=2；i溶液：

$(document).ready(function(){
    $('#id_NOU').change(function () {
        var total = $(this).val();

        //remove all
        $('.list').each(function (index) {
            if (index != 0) $(this).remove();
        });

        //create new ones
        for (var i = 2; i <= total; i++) {
            element = $('.list:first').clone();
            element.find('input').attr('id', 'unit' + i);
            element.find('label').html('Unit ' + i);
            element.appendTo('ul');
        }
    });
});

$（文档）.ready（函数（）{
$（'#id_NOU'）。更改（函数（）{
var total=$（this.val（）；
//全部删除
$（'.list'）。每个（函数（索引）{
如果（index！=0）$（this.remove（）；
});
//创造新的
对于（var i=2；i也许更好的实现是只复制最后一个字段，在进一步更改时保持列表的其余部分不变

这是密码

var counter = 1;
$(function(){
    $("#id_NOA").on("change", function(){
        var $ul = $(this).parent().parent();
        var val = $(this).val();        
        while($ul.find(".list").length < val){
            var $item = $ul.find(".list:last").clone();
            $item.find("input").attr("id", "unit"+counter++);
            $item.find("label").html("Unit "+counter);
            $ul.append($item);
        }
        if($ul.find(".list").length >= val){
            $ul.find(".list:gt("+(val-1)+")").remove();
            counter = val;
        }

    });
});

var计数器=1；
$（函数（）{
$（“#id_NOA”）。关于（“更改”，函数（）{
var$ul=$（this.parent（）.parent（）；
var val=$（this.val（）；
而（$ul.find（“.list”）.length=val）{
$ul.find（“.list:gt”（+（val-1）+”）.remove（）；
计数器=val；
}
});
});

这是一个JSFIDLE链接
这实际上效果更好。从最后的
复制更好。在其他代码中也有一个奇怪的错误，我无法理解，这恰好也解决了这个问题。谢谢！