Question

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

＆＃13;

MouseOver

＆＃13;

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

＆＃13;

有没有办法显示div的组合？示例：如果我选择2个塔，则显示div 1和2。如果我选择3个塔，则显示div 1,2和3。

任何帮助都将是apreciated

Answer 1

将条件从==更改为>=

<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 2

您可以为每个塔添加一个类，并在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 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>

HTML和javascript显示多个div

3 个答案: