Javascript 根据下拉列表中的选择显示/隐藏列

我根据下拉列表中的选择搜索了如何显示/隐藏列。我写道：

函数分类准则（）{
var sections=document.getElementById（“sections”）.value；
如果（章节==“通用”）{
document.getElementByClassName（“generaux”）.style.display=“block”；
}否则{
document.getElementByClassName（“generaux”）.style.display=“无”；
}
}

唱诗班
任命généraux
米内罗
维生素类
奥特雷斯
营养素
重量
能源kJ
能量kcal
布莱
150gr
能源
能源大卡
全部的
150克

它是

getElementsByClassName（）

而不是

getElementByClassName（）

，它返回和数组。您必须使用括号表示法访问数组的每个元素

函数categoriescrites（）{
var sections=document.getElementById（“sections”）.value；
如果（章节==“通用”）{
var g=document.getElementsByClassName（“generaux”）；
对于（var i=0；i使用jQuery。它是一个JavaScript库。它大大简化了JavaScript编程

代码的使用

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

这将返回选定的下拉选项值。
然后需要比较所选选项是否为
generaux

如果为true，则将所有类generaux元素的显示属性设置为table cell

如果为false，即用户选择了另一个选项。然后我们将所有class
generaux
元素的显示属性设置为none

$（'.generaux'）
类似于
document.getElementsByClassName（'generaux'）

可作为

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

使用
display:block；
会破坏表格对齐。因此最好使用
display:table单元格；
函数分类准则（）{
var sections=document.getElementById（“sections”）.value；
如果（章节==“通用”）{
$（'.generaux'）。每个（函数（）{
this.style.display=“表格单元格”
});
}否则{
$（'.generaux'）。每个（函数（）{
this.style.display=“无”
});
}
}

唱诗班
任命généraux
米内罗
维生素类
奥特雷斯
营养素
重量
能源kJ
能量kcal
布莱
150gr
能源
能源大卡
全部的
150克
事实上，确实发生了一些事情：您遇到了一个错误。我建议您查看一下。错误是没有
document.getElementByClassName（）
这样的函数。没有
document.getElementByClassName（）
its
document.getElementsByClassName（）
note's'是的，我看到了这个错误，但我不知道如何更正。我尝试了getElementsByClassName而不是document.getElementByClassName，现在我遇到了这个错误：getElementsByClassName未定义”。我是javascript新手…Khaliel，我修改为document.getElementsByClassName（）但我仍然有一个错误：无法将属性“display”设置为未定义“您应该添加您正在使用jQuery，我们不知道他是否没有使用它。尽管如此，它应该可以工作；）非常感谢@Geethu Jose它能工作！您正在使用Jquery，这对我来说是全新的…所以现在我必须为我的下拉列表的每个选项使用这些代码，我想？Jquery是一个JavaScript库。它极大地简化了JavaScript编程。@Geethu Jose:非常感谢您非常明确的回答！这是我关于stackoverflow的第一篇文章，我找不到解决问题的地方…我没有使用jQuery，它纯粹是JavaScript。是的，我很抱歉，我以为我在回答下面的帖子…使用jQuery。。。
var generauxElements = document.getElementsByClassName("generaux");
for(var i=0,length=generauxElements.length; i<length; i++){
  generauxElements[i].style.display="table-cell";
} 

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