Question

我有一张表格要求用户进入房屋的房间。我希望他们能够添加尽可能多的“房间”。表单上的每个房间都包含两个选择框和两个文本字段。我有一个js函数，通过使用.innerHTML添加一个新的选择框但是如果我不将所有代码放在一行上它将无法工作。其中一个选择框有很多选项，我想知道是否有更简洁的方法来做到这一点？

通过按钮点击调用该函数，下面是我想要的方法，但只有当我将所有选项放在单个行中的所有选项时才能使用.innerHTML谢谢！

function add_room() {

    var room_count = 0;
    write = document.getElementById('new_room')

    write.innerHTML +='<select name="level[]" id="levels"' + room_count + '/> ';
    write.innerHTML +='<option>Basement</option>';
    write.innerHTML +='<option>Lower Level</option>';
    write.innerHTML +='<option>Main Floor</option>';
    write.innerHTML +='<option>2nd Floor</option>';
    write.innerHTML +='<option>3rd Floor</option></select>';

    room_count++;

}

Answer 1

将所有选项作为字符串附加到变量中，然后将其分配给innerHTML。

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++;
}

在包含选择框的表单中添加新行

1 个答案: