javascript - 使用 Javascript 创建新的 div 和选择框

Question

我正在尝试创建一些带有选择框的 div。

如果您更改子项的数量(请参见下面的示例 - 最后一个选择的是 0)，代码会起作用，并且会根据选择框的值创建带有选择框的新 div。

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

您还可以看到我有一些注释代码，用于每个房间的 child 选择选项。

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

2. 有没有更好的方法让它与 for 循环一起工作，而不是像 Kids Age 1 Room - Kids Age 2 Room - Kids Age 3 Room 一样？

请提供任何反馈意见。

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

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