Question

我有一个表单，它会询问用户输入字段的数量，然后将输入附加到表单。我用JavaScript开发了这个函数。

问题是它第一次能正常工作。如果我再次从select标签中选择另一个数字，它会将输入字段的数量附加到先前的输入。

示例：

如果我首先选择4个输入字段，它将显示4个输入字段。
如果我再次从select标签中选择2，它将添加另外两个输入字段。

共有6个输入字段。我不希望这样。如果我选择4它应该是4.如果我再次选择2它应该是2，而不是6.这是我的代码：

function obj(){

    var a=document.getElementById('no_of_obj').value; //select tag value(1 to 6)
    var b=document.getElementById('objBlock') //this is the container
    var i=0;

    while(i<a){
        var txt=document.createElement('input');
        txt.type="text";
        txt.id="obj"+i;
        txt.style.height="30px";

        b.appendChild(txt);
        i++;
    }

}

Answer 1

您可以使用以下内容清除objBlock容器，然后附加新的input元素：

b.innerHTML = '';

Answer 2

试试这个

function obj(){

    var a=document.getElementById('no_of_obj').value;//select tag value(1 to 6)
    var b=document.getElementById('objBlock')//this is the container
    var i=0;

    while(b.children.length < a){
        var ct = document.createElement('div');
        var txt=document.createElement('input');
        txt.type="text";
        txt.id="obj"+i;
        txt.style.height="30px";
        ct.appendChild(txt);
        b.appendChild(ct)
    }

    while(b.children.length > a){
        b.removeChild(b.children[b.children.length - 1]);
    }
}

演示：Fiddle

使用jQuery

$(function(){
    var $ct = $('#objBlock');
    $('#no_of_obj').change(function(){
        var count = $(this).val(), counter = count - $ct.children().length;

        while(counter-- > 0){
            $('<div><input class="input-xlarge"/></div>').appendTo($ct);
        }

        $ct.children(':gt(' + (count - 1) + ')').remove();
    });
})

演示：Fiddle

根据用户输入没有输入字段

2 个答案: