请帮助调整javascript，使其与多个下拉菜单配合使用，以显示/隐藏表行

我正在使用脚本根据下拉列表中的选择显示和隐藏表行。只需一次下拉即可正常工作。但是，当我添加其他下拉菜单时，它会显示隐藏的行，但不会隐藏以前的选择。因此，除非手动重置列表，否则所有内容都会立即显示。我使用css display:none将表行隐藏为默认状态。我工作的网站使用怪癖模式。JQuery不是一个选项。我真的很感谢你的帮助。我不得不认为脚本可以调整，以便它可以查看所有的选择列表。谢谢你，很抱歉我是个笨蛋

这是一把小提琴：

以下是脚本：

function Cng(obj){
 var opts=obj.options;
 for (var z0=0;z0<opts.length;z0++){
  if (document.getElementById(opts[z0].value)){
   document.getElementById(opts[z0].value).style.display=opts[z0].selected?'table-row':'none'; 
  } 
 }
}

---

我对您的html进行了一些快速更新，以促进解决方案：

<select name="evidencemenu" id="select1" onchange="Cng(this);" >
  <option value="" >Please select</option>
  <!--USE THIS OPTION FOR TESTING  -->
  <option value="grade3art" >Grades 3-5 Art</option>
</select>
<select name="evidencemenu"  id="select2" onchange="Cng(this);" >
  <option value="" >Please select</option>
  <!--USE THIS OPTION FOR TESTING  -->
  <option value="grade6ela" >Grades 6-8 ELA</option>
</select>
<select name="evidencemenu" id="select3" onchange="Cng(this);" >
     <!--Do not use these for testing  -->
  <option value="" >Please select</option>
  <option value="grade9ela" >Grades 9-12 ELA</option>
  <option value="grade9math" >Grades 9-12 Math</option>
  <option value="grade9art" >Grades 9-12 Art</option>
</select>

注意类周围的引号和添加的ID

然后我稍微更改了js函数：

function Cng(obj){
  var opts=obj.options,
      elements = document.getElementsByName('evidencemenu'),
      i, j, options;

  for (i = 0; i<elements.length; i++){
    if (elements[i].getAttribute('id') != obj.getAttribute('id')) {
        options = elements[i].options
        for (j=0; j<options.length; j++){
            if (document.getElementById(options[j].value)){
                document.getElementById(options[j].value).style.display = 'none';
            }
        }
        elements[i].value = ''
    }
  }

 for (var z0=0;z0<opts.length;z0++){
  if (document.getElementById(opts[z0].value)){
   document.getElementById(opts[z0].value).style.display=opts[z0].selected?'table-row':'none'; 
  } 
 }
}

这将遍历所有选择选项，将隐藏行设置为隐藏，如果它们不是当前项，则将它们全部设置为空白

---

编辑：我将类更改为名称，并将js函数更改为getElementsByName，以符合quirks模式。现在看来可以工作了，在IE中用HTML 4.01过渡标题进行了测试。

我不认为我完全理解您的问题。你能举一个例子说明一种情况并没有按照你的意愿发挥作用吗？例如，当我选择“3-5级艺术”时，应该发生什么，当我选择“6-8级ELA”时，应该改变什么？你做了什么尝试来解决这个问题？@wolffer east当你选择3-5级艺术时，它会显示带有相应ID的隐藏行。当你选择6-8级ELA时，它应该隐藏3-5级艺术，显示6-8级ELA。为什么要隐藏这些元素？3-5艺术仍在另一个下拉列表中选择，因此应显示。您可以取消选择其他应隐藏这些内容的更改下拉列表elements@Shmiddty我认为更好的解决方案是使用类名，但据我所知，这在IE8及以下版本中是行不通的。我需要一个解决方案，在IE 7或以上的工作。我尝试添加一个else语句以再次显示none，但没有效果。很抱歉，我无法更好地解释它。这太棒了，我非常感谢您的输入，但它使用getElementsByClassName，这在怪癖模式下不起作用。有没有任何方法可以使用getElementById实现这一点？最终版本将有多个隐藏行。我应该给每一行一个ID，然后重复多次getElementById吗？感谢您的帮助。如果document.getElementsByTagName有效，您可以获取页面上的所有选择，然后检查其上是否有正确的类。查看这篇文章，了解hasClass的javascript实现：。将测试放入for循环，然后，如果它具有正确的类，则运行id测试。

<select name="evidencemenu" id="select1" onchange="Cng(this);" >
  <option value="" >Please select</option>
  <!--USE THIS OPTION FOR TESTING  -->
  <option value="grade3art" >Grades 3-5 Art</option>
</select>
<select name="evidencemenu"  id="select2" onchange="Cng(this);" >
  <option value="" >Please select</option>
  <!--USE THIS OPTION FOR TESTING  -->
  <option value="grade6ela" >Grades 6-8 ELA</option>
</select>
<select name="evidencemenu" id="select3" onchange="Cng(this);" >
     <!--Do not use these for testing  -->
  <option value="" >Please select</option>
  <option value="grade9ela" >Grades 9-12 ELA</option>
  <option value="grade9math" >Grades 9-12 Math</option>
  <option value="grade9art" >Grades 9-12 Art</option>
</select>

function Cng(obj){
  var opts=obj.options,
      elements = document.getElementsByName('evidencemenu'),
      i, j, options;

  for (i = 0; i<elements.length; i++){
    if (elements[i].getAttribute('id') != obj.getAttribute('id')) {
        options = elements[i].options
        for (j=0; j<options.length; j++){
            if (document.getElementById(options[j].value)){
                document.getElementById(options[j].value).style.display = 'none';
            }
        }
        elements[i].value = ''
    }
  }

 for (var z0=0;z0<opts.length;z0++){
  if (document.getElementById(opts[z0].value)){
   document.getElementById(opts[z0].value).style.display=opts[z0].selected?'table-row':'none'; 
  } 
 }
}