使用Javascript创建新div和选择框

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

如果您更改子项的数量（请参见下面的示例-最后一个选择了0的子项），并且正在使用选择框创建新的div，则该代码将正常工作，具体取决于选择框的值

但如果房间数大于1，则它将停止工作。我在开发工具上没有收到js的错误

您也可以看到，我有一些代码作为注释，用于儿童选择选项上的每个房间

当房间数超过1个时，我做错了什么，选择框不起作用？

有没有更好的方法让它与for循环一起工作，而不是像1岁儿童房间-2岁儿童房间-3岁儿童房间一样工作？

请注意，任何反馈都会有帮助

请原谅我的语言有任何错误：D

document.getElementById（'search\u rooms\u select'）。addEventListener（'change'，function（）{
var container=document.getElementById（'container'）；
container.innerHTML=''；
var n=1；
对于（变量i=0；i对于（var i=1；i这应该对你有用

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

function children1（e）{
var ks1=document.getElementById（'kidssection1'）；
ks1.innerHTML=''；
var m=1；
m=~~e；
对于（var i=1；i 1），我不理解第一个问题。如果运行该代码段，您可以看到将房间数从1更改为2会呈现另一个房间。2）可能对您有帮助的第一件事是，不要循环
this.options[i].selected
要查找所选选项，只需使用
此值即可。该值应给出所选选项的值，而
此值等于select。3）您的第二个问题可以通过使用事件冒泡来解决。不必将
change
侦听器绑定到您创建的每个新选择，只需将一个
change
侦听器添加到div
容器
。如果div中的一个选择发生更改，事件将冒泡到div并触发该处理程序上的事件。然后，如果使用事件的事件对象：
.addEventListener（'change'，函数（事件）{
，然后您可以使用
event.target
访问已更改的选择。这样，您可以向容器div添加任意数量的额外选择，但仍然只有一个事件处理程序处理所有更改。如果我的第一个问题不清楚，很抱歉。如果运行代码段，您可以将最后一个选择选项从0更改为3作为示例你可以看到新的选择框被创建。如果你改变房间的数量，它就不再工作了@ShillyAha，我明白了。将更改处理程序放在div而不是select上应该可以解决这个问题。我更喜欢这样做，而不是每次添加/删除一些html时绑定/重新绑定事件。
<select name='childrenTotalRoom1' class='form-control' onchange='children"+i+"(this.value)'>

//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'));