创建新的div和带有Javascript的复选框

Question

我正在尝试用选择框创建一些div。

如果您更改了子程序的数量(请参见下面的示例--最后一个选择为0的示例)，则代码正在工作，并且正在创建带有选择框的新div取决于选择框的值。

但是如果房间数大于1，它就停止工作了。我在开发工具上没有从js那里得到错误。

此外，您可以看到，我有一些代码作为注释，用于每个房间的孩子选择选项。

1. ，当房间超过1的时候，我做错了什么，选择框不能工作？
2. 是否有更好的方法让它与for循环一起工作，而不是像孩子1岁房间-孩子年龄2房间-孩子3岁房间?

请提供任何反馈意见将有帮助。

也请原谅我的语言有任何错误。

​

document.getElementById('search_rooms_select').addEventListener('change', function(){ 
    var container = document.getElementById('container');    
    container.innerHTML = '';
    var n = 1;
    for(var i = 0; i < this.options.length; ++i){
        if(this.options[i].selected){
            n = ~~this.options[i].value;
            break;
        }
    }    
    for(var i = 1; i <= n; ++i){ 
        var newDiv = document.createElement('div'); 
        newDiv.id = 'element-' + i; 
        newDiv.innerHTML = "<div class='col-xs-12 col-md-12' id='room-"+i+"'><div class='col-xs-4 col-md-4'><label>Room "+i+":</label></div><div class='col-xs-8 col-md-8 paddinglr'><div class='col-xs-6 col-sm-6 col-md-6'><select name='adultsTotalRoom"+i+"' class='form-control' id='adults-"+i+"'><option value='1'>1</option><option value='2' selected>2</option><option value='3'>3</option><option value='4'>4</option></select></div><div class='col-xs-6 col-sm-6 col-md-6'><select name='childrenTotalRoom1' class='form-control' id='children-"+i+"'><option value='0' selected>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option></select></div></div><div id='kidssection"+i+"'></div></div>";

        container.appendChild(newDiv);
    }
}); 
document.getElementById('search_rooms_select').dispatchEvent(new Event('change'));

//Kids Age 1 Room
document.getElementById('children-1').addEventListener('change', function(){ 
    var ks1 = document.getElementById('kidssection1');    
    ks1.innerHTML = ''; 
    var m = 1;
    for(var i = 0; i < this.options.length; ++i){
        if(this.options[i].selected){
            m = ~~this.options[i].value;
            break;
        }
    }    
    for(var i = 1; i <= m; ++i){ 
        var newDiv = document.createElement('div'); 
        newDiv.id = 'elementm-' + i; 
        newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><small>Child "+i+" Age</small><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value='0'>0</option></select></div>";
        ks1.appendChild(newDiv);
    }
}); 
document.getElementById('children-1').dispatchEvent(new Event('change'));


//////Kids Age 2 Room
//document.getElementById('children-2').addEventListener('change', function(){ 
//    var ks2 = document.getElementById('kidssection2');    
//    ks2.innerHTML = ''; 
//    var m1 = 1;
//    for(var i = 0; i < this.options.length; ++i){
//        if(this.options[i].selected){
//            m1 = ~~this.options[i].value;
//            break;
//        }
//    }    
//    for(var i = 1; i <= m1; ++i){ 
//        var newDiva = document.createElement('div'); 
//        newDiva.id = 'elementm1-' + i; 
//        newDiva.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><select name='children1age"+i+"' class='form-control' id='children2age"+i+"'><option value='0'>0</option></select></div>";
//        ks2.appendChild(newDiva);
//    }
//}); 
//document.getElementById('children-2').dispatchEvent(new Event('change'));
//
//
////Kids Age 3 Room
//document.getElementById('children-3').addEventListener('change', function(){ 
//    var container = document.getElementById('kids-section-3');    
//    container.innerHTML = ''; 
//    var n = 1;
//    for(var i = 0; i < this.options.length; ++i){
//        if(this.options[i].selected){
//            n = ~~this.options[i].value;
//            break;
//        }
//    }    
//    for(var i = 1; i <= n; ++i){ 
//        var newDiv = document.createElement('div'); 
//        newDiv.id = 'element-' + i; 
//        newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value=''>0</option></select></div>";
//        container.appendChild(newDiv);
//    }
//}); 
//document.getElementById('children-3').dispatchEvent(new Event('change'));

<div class="container">
    <div class="col-xs-12">
        <div class="col-xs-3">
            <label class="search_rooms_input" for="search_rooms_input">Rooms:</label>
        </div>                            
        <div class="col-xs-9">
            <select name="total_rooms_search" class="form-control" id="search_rooms_select">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </div>
    <div class="col-xs-12 col-md-12 paddinglr labelform">
        <div class="col-xs-4 col-md-4 col-sm-4 paddingright">
            <label class="labelselect"></label>
        </div>
        <div class="col-xs-8 col-md-8 col-sm-8 paddinglr">
            <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
                <label>Adults</label>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
                <label>Children</label>
            </div>
        </div>
    </div>

    <div id="container">    </div>


<br/><br/><br/><br/><br/><br/>

​

Answer 1

这应该对你有用。

function children1(e){

var ks1 = document.getElementById('kidssection1');    
ks1.innerHTML = ''; 
var m = 1;
m = ~~e;
for(var i = 1; i <= m; ++i){ 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'elementm-' + i; 
    newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><small>Child "+i+" Age</small><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value='0'>0</option></select></div>";
    ks1.appendChild(newDiv);
  }
}

我所做的就是删除事件侦听器，并在选择框中添加onchange函数。

还可以更改子级的最后一个选项，选择并添加onchange函数，如下所示：

<select name='childrenTotalRoom1' class='form-control' onchange='children"+i+"(this.value)'>

因此，您只需创建3个不同的函数，或稍微修改代码，只需使用一个函数即可。这取决于你！

因此，将代码的这一部分替换为上面的函数：

//Kids Age 1 Room
document.getElementById('children-1').addEventListener('change', function(){ 
var ks1 = document.getElementById('kidssection1');    
ks1.innerHTML = ''; 
var m = 1;
for(var i = 0; i < this.options.length; ++i){
    if(this.options[i].selected){
        m = ~~this.options[i].value;
        break;
    }
}    
for(var i = 1; i <= m; ++i){ 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'elementm-' + i; 
    newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><small>Child "+i+" Age</small><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value='0'>0</option></select></div>";
    ks1.appendChild(newDiv);
}
}); 
document.getElementById('children-1').dispatchEvent(new Event('change'));