javascript - 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;
	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>

<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的组合？示例:如果我选择 2 个塔，则显示 div 1 和 2。如果我选择 3 个塔，则显示 div 1,2 和 3。

任何帮助将不胜感激

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>

如果您想添加更多塔，您唯一需要做的就是使用额外选项和带有额外塔形式的 div 编辑 HTML 下拉列表。