HTML和JavaScript显示多个div的

Question

我有一个代码，如果选择下拉列表中的某个值，它将显示/隐藏相应的div。隐藏div的值将被添加到数据库中。

<script> 
 
document.getElementById('number').addEventListener('change', function() 
 
{ 
 
    var style = number.value == 1 ? 'block' : 'none'; 
 
    document.getElementById('1tower').style.display = style; 
 
\t var style = number.value == 2 ? 'block' : 'none'; 
 
    document.getElementById('2tower').style.display = style; 
 
\t var style = number.value == 3 ? 'block' : 'none'; 
 
\t document.getElementById('3tower').style.display = style; 
 
}); 
 
</script>

<select id="number" name="number_towers"> 
 
<option hidden value=""></option> 
 
<option value="1">1 tower</option> 
 
<option value="2">2 towers</option> 
 
<option value="3">3 towers</option> 
 
</select> 
 

 
<div id="1tower" style="display: none;"> 
 
A Tower Value 1: <input type ="text" name = "curent_nominal_sec1"/><br> 
 
B Tower Value 1: <input type ="text" name = "putere_sec1"/><br> 
 
C Tower Value 1: <input type ="text" name = "clasa_precizie_sec1"/></div> 
 

 
<div id="2tower" style="display: none;"> 
 
A Tower Value 2: <input type ="text" name = "curent_nominal_sec2"/><br> 
 
B Tower Value 2: <input type ="text" name = "putere_sec2"/><br> 
 
C Tower Value 2: <input type ="text" name = "clasa_precizie_sec2"/></div> 
 

 
<div id="3tower" style="display: none;"> 
 
A Tower Value 3: <input type ="text" name = "curent_nominal_sec3"/><br> 
 
B Tower Value 3: <input type ="text" name = "putere_sec3"/><br> 
 
C Tower Value 3: <input type ="text" name = "clasa_precizie_sec3"/></div>

是否有显示DIV的方式真实combinated？ 示例：如果我选择2个塔，然后显示DIV 1和2 如果我选择3个塔，然后显示DIV 1,2和3

任何帮助将apreciated

Answer 1

您可以添加一个类到每个塔，并在JavaScript中获取它们。然后从下拉列表中选择所需号码。接下来我们需要了解循环的数量。它循环遍历所有塔，并检查i是否仍低于所选的number。如果是，则更改为block，否则更改为none。您可以根据需要使用此代码添加尽可能多的塔：

var towers = document.getElementsByClassName('tower'); 
 
document.getElementById('number').addEventListener('change', function() { 
 
    var number = this.value; 
 
    for (var i = 0; i < towers.length; i++) { 
 
    towers[i].style.display = i < number ? 'block' : 'none'; 
 
    } 
 
});

<select id="number" name="number_towers"> 
 
    <option hidden value=""></option> 
 
    <option value="1">1 tower</option> 
 
    <option value="2">2 towers</option> 
 
    <option value="3">3 towers</option> 
 
</select> 
 

 
<div id="1tower" class="tower" style="display: none;"> 
 
    A Tower Value 1: 
 
    <input type="text" name="curent_nominal_sec1" /> 
 
    <br>B Tower Value 1: 
 
    <input type="text" name="putere_sec1" /> 
 
    <br>C Tower Value 1: 
 
    <input type="text" name="clasa_precizie_sec1" /> 
 
</div> 
 

 
<div id="2tower" class="tower" style="display: none;"> 
 
    A Tower Value 2: 
 
    <input type="text" name="curent_nominal_sec2" /> 
 
    <br>B Tower Value 2: 
 
    <input type="text" name="putere_sec2" /> 
 
    <br>C Tower Value 2: 
 
    <input type="text" name="clasa_precizie_sec2" /> 
 
</div> 
 

 
<div id="3tower" class="tower" style="display: none;"> 
 
    A Tower Value 3: 
 
    <input type="text" name="curent_nominal_sec3" /> 
 
    <br>B Tower Value 3: 
 
    <input type="text" name="putere_sec3" /> 
 
    <br>C Tower Value 3: 
 
    <input type="text" name="clasa_precizie_sec3" /> 
 
</div>

如果你想添加更多的塔，你需要做的唯一事情是一个额外的选项编辑HTML下拉和一个额外的塔形式的div。

Answer 2

改变条件从==到>=

<script> 
document.getElementById('number').addEventListener('change', function() 
{ 
    var style = number.value >= 1 ? 'block' : 'none'; 
    document.getElementById('1tower').style.display = style; 
    var style = number.value >= 2 ? 'block' : 'none'; 
    document.getElementById('2tower').style.display = style; 
    var style = number.value >= 3 ? 'block' : 'none'; 
    document.getElementById('3tower').style.display = style; 
}); 
</script> 

Answer 3

<script> 
document.getElementById('number').addEventListener('change', function() 
{ 
var value = number.value; 
document.getElementById('1tower').style.display = 'none'; 
document.getElementById('2tower').style.display = 'none'; 
document.getElementById('3tower').style.display = 'none'; 

for (var i = value; i > 0; i--) { 
    document.getElementById(i+'tower').style.display = 'block'; 
} 
}); 
</script>