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

Question

使用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>

JavaScript的：

$(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');
        }
    });
});

非常感谢你的帮助！ 我喜欢JSFiddles ...

Answer 1

也许更好的实现方式是仅复制最后一个字段，并在进一步更改时保持列表的其余部分不变

这是代码

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

    });
});

这是一个jsfiddle链接http://jsfiddle.net/EN687/1/

Answer 2

解：

$(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');
        }
    });
});

工作演示 ： http : //jsfiddle.net/6VQDR/1/