-1

ユーザーに入力フィールドの数を尋ね、フォームに入力を追加するフォームがあります。JavaScriptを使って関数を開発しました。

問題は、初めて正常に動作することです。selectタグから別の番号を再度選択すると、前の入力に入力フィールドの数が追加されます。

例：

  • 最初に4つの入力フィールドを選択すると、4つの入力フィールドが表示されます。
  • 選択タグからもう一度2を選択すると、さらに2つの入力フィールドが追加されます。

したがって、全部で6つの入力フィールド。私はそれを望んでいません。4を選択した場合は4になります。もう一度2を選択した場合は、6ではなく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(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 に答える