我正在尝试使用选择框创建一些div。
如果您更改子项数，代码正常工作（请参阅下面的示例 - 最后一项选择0），并且正在创建带有选择框的新div取决于选择框的值。
但是如果房间数大于1则会停止工作。我没有从开发工具上的js那里得到任何错误。
另外，你可以看到我有一些注释的代码，可以在子选择选项的每个房间使用它。
我做错了什么，当房间超过1时，选择框无效？
有没有更好的方法让它与for循环一起工作而不是像孩子年龄1室 - 儿童年龄2室 - 儿童3岁室？
< / LI>请提供反馈意见。
也可以原谅我的语言：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/>
答案 0 :(得分：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'));