根據下拉列表中的選項顯示/隱藏列

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

使用jQuery的。它是一個JavaScript Library.It大大簡化了JavaScript編程。

代碼

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

這將返回選擇下拉選項值的工作。 然後，您需要比較所選選項是否爲generaux。

如果爲true，我們將所有類別的元素的display屬性設置爲table-cell。

如果爲假，即;用戶選擇了其他選項。然後我們將所有generaux元素的display屬性設置爲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"; 
} 

​​3210的方法的替代方案中被設計爲使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>

Answer 2

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