-1

我有一个表单，它会询问用户输入字段的数量，然后将输入附加到表单中。我已经使用 JavaScript 开发了该功能。

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

例子：

  • 如果我首先选择 4 个输入字段，它将显示 4 个输入字段。
  • 如果我再次从选择标签中选择 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++;
    }

}
4

2 回答 2

3

objBlock您可以在添加新input元素之前清除容器，使用：

b.innerHTML = '';
于 2013-03-25T13:41:53.403 回答
1

尝试这个

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

演示：小提琴

使用 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();
    });
})

演示：小提琴

于 2013-03-25T13:47:41.740 回答