顯示/隱藏列，具體取決於下拉列表中的選擇

Question

我搜索了如何根據下拉列表中的選擇顯示/隱藏列。 我這樣寫：

 function categoriesCriteres() { var sections = document.getElementById("sections").value; if (sections == "generaux") { document.getElementByClassName("generaux").style.display = "block"; } else { document.getElementByClassName("generaux").style.display = "none"; } } 

 <select class="form-control" id="sections" name="sections" onchange="categoriesCriteres()"> <option value="choisir" selected disabled>Choisir</option> <option id="generaux" value="generaux">Apports généraux</option> <option id="mineraux" value="mineraux">Minéraux</option> <option id="vitamines" value="vitamines">Vitamines</option> <option id="autres" value="autres">Autres</option> </select> <div> <table class="table table-striped" id="nutrition"> <thead> <tr> <th>Aliments</th> <th>Poids</th> <th class="generaux">Energie kJ</th> <th class="generaux">Energie kcal</th> </thead> <tbody class="text-primary" id="myrecap"> <tr> <td>blé</td> <td><strong>150gr</strong></td> <td class="generaux">energie_kJ</td> <td class="generaux">energie_kcal</td> </tr> <tr> <td>Total</td> <td><strong>150 gr</strong></td> </tr> </tbody> </table> </div> 

但是，當我更改下拉列表中的值時，什么都沒有發生……我不明白這是怎么回事。……也許有人可以幫助我？

Answer 1

它是getElementsByClassName()而不是getElementByClassName() ，並且返回和數組。 您必須使用[]括號符號訪問數組的每個元素。

 function categoriesCriteres () { var sections = document.getElementById("sections").value; if (sections == "generaux") { var g = document.getElementsByClassName("generaux"); for(var i=0; i<g.length; i++){ g[i].style.display="block"; } } else { var g = document.getElementsByClassName("generaux"); for(var i=0; i<g.length; i++){ g[i].style.display="none"; } } } 

 <select class="form-control" id="sections" name="sections" onchange="categoriesCriteres()"> <option value="choisir" selected disabled>Choisir</option> <option id="generaux" value="generaux">Apports généraux</option> <option id="mineraux" value="mineraux">Minéraux</option> <option id="vitamines" value="vitamines">Vitamines</option> <option id="autres" value="autres">Autres</option> </select> <div> <table class="table table-striped" id="nutrition"> <thead> <tr> <th>Aliments</th> <th>Poids</th> <th class="generaux">Energie kJ</th> <th class="generaux">Energie kcal</th> </thead> <tbody class="text-primary" id="myrecap"> <tr> <td>blé</td><td><strong>150gr</strong></td> <td class="generaux">energie_kJ</td> <td class="generaux">energie_kcal</td> </tr> <tr><td>Total</td><td><strong>150 gr</strong></td></tr> </tbody> </table> </div> 

Answer 2

使用jQuery。這是一個JavaScript庫，大大簡化了JavaScript編程。

代碼的工作

var sections = document.getElementById("sections").value;

這將返回選定的下拉選項值。 然后，您需要比較所選選項是否為generaux 。

如果為true，則將所有類Generaux元素的顯示屬性設置為table-cell。

如果為假，即； 用戶選擇了另一個選項。 然后，將所有類generaux元素的顯示屬性設置為none。

$('.generaux')與document.getElementsByClassName('generaux')類似。

$('.generaux').each(function() {
          this.style.display = "table-cell"
});

可以替代

var generauxElements = document.getElementsByClassName("generaux");
for(var i=0,length=generauxElements.length; i<length; i++){
  generauxElements[i].style.display="table-cell";
} 

.each（）方法旨在使DOM循環結構簡潔明了，並且不易出錯。 調用時，它將遍歷作為jQuery對象一部分的DOM元素。 每次回調運行時，都會從0開始傳遞當前循環迭代。更重要的是，回調是在當前DOM元素的上下文中觸發的，因此關鍵字this引用了該元素。

if (sections == "generaux") {
    $('.generaux').each(function() {
      this.style.display = "table-cell"
    });
  } else {
    $('.generaux').each(function() {
      this.style.display = "none"
    });
  }

使用display: block; 破壞了表格的對齊方式。 所以最好使用display: table-cell;

 function categoriesCriteres() { var sections = document.getElementById("sections").value; if (sections == "generaux") { $('.generaux').each(function() { this.style.display = "table-cell" }); } else { $('.generaux').each(function() { this.style.display = "none" }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control" id="sections" name="sections" onchange="categoriesCriteres()"> <option value="choisir" selected disabled>Choisir</option> <option id="generaux" value="generaux">Apports généraux</option> <option id="mineraux" value="mineraux">Minéraux</option> <option id="vitamines" value="vitamines">Vitamines</option> <option id="autres" value="autres">Autres</option> </select> <div> <table class="table table-striped" id="nutrition"> <thead> <tr> <th>Aliments</th> <th>Poids</th> <th class="generaux">Energie kJ</th> <th class="generaux">Energie kcal</th> </thead> <tbody class="text-primary" id="myrecap"> <tr> <td>blé</td> <td><strong>150gr</strong></td> <td class="generaux">energie_kJ</td> <td class="generaux">energie_kcal</td> </tr> <tr> <td>Total</td> <td><strong>150 gr</strong></td> </tr> </tbody> </table> </div>