Question

嗨，这是早期问题的第二部分。我需要将行添加到由选择框组成的表单中。表单中的每一行都是房屋中的“房间”类型，用户必须能够根据需要添加任意数量的房间。我已经完成了所有工作但是如果你填写第二个房间然后添加第三个房间它将选择框重置为第二个房间的默认值。我可以看到它为什么这样做我只是想不出如何更改功能，以便保持以前的选择完好无损。注意：我在HTML中写了第一个房间的第一行，然后通过单击按钮调用此功能（如下）并添加额外的房间。

function add_room() {

    var room_count = 0;
    write = document.getElementById('new_room')
    var roomSelect = '<select name="level[]" id="levels"' + room_count + '/> ';
    roomSelect += '<option>Basement</option>';
    roomSelect += '<option>Lower Level</option>';
    roomSelect += '<option>Main Floor</option>';
    roomSelect += '<option>2nd Floor</option>';
    roomSelect += '<option>3rd Floor</option></select>';
    write.innerHTML += roomSelect;
    room_count++;
}

感谢您提供的任何帮助！

Answer 1

这是因为.innerHTML +=的魔力。

正如您可能已经猜到的那样，它实际上与div.innerHTML = div.innerHTML + moreHTML相同 - 因此浏览器会重置div的HTML。显然包括任何选择。

我建议您使用div.appendChild。它不会更改以前加载的HTML，因此不会更改用户的选择。

function add_room() {
    var room_count = 0;
    write = document.getElementById('new_room');
    var roomSelect = document.createElement('select'); // create select node
    roomSelect.setAttribute("name", "level[]");
    roomSelect.setAttribute("id", "levels" + room_count);
    roomSelect.innerHTML = '<option>Basement</option>'+ //set the innerHTML (the options)
                   '<option>Lower Level</option>'+
                   '<option>Main Floor</option>'+
                   '<option>2nd Floor</option>'+
                   '<option>3rd Floor</option>'
    write.appendChild(roomSelect); //append the child
    room_count++;
}

动态地向表单添加行而不重置前一行

1 个答案: