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

Question

使用JavaScript，我创建了一个下拉菜单，该菜单生成了用户选择（1-6）指示的输入字段数。但是我如何使新生成的输入字段的IDS＆amp;标签对应于输入字段列表中的他们的位置？我希望这是有道理的。您会在我的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');
        }
    });
});

工作demo ：http：//jsfiddle.net/6vqdr/1/