请帮助调整javascript，以便它与多个下拉菜单一起显示/隐藏表格行

Question

我正在使用一个脚本根据从下拉列表中的选择显示和隐藏表行。 它只有一个下拉菜单就可以正常工作。 但是，当我添加其他下拉菜单时，它会显示隐藏的行，但不会隐藏先前的选择。 因此，除非手动重置列表，否则最终所有内容都会立即显示。 我正在使用CSS display: none将表行隐藏为默认状态。 我正在工作的网站使用怪癖模式。 不能使用JQuery。 我真的很感谢您的帮助。 我必须认为可以对脚本进行调整，以便可以查看所有选择列表。 谢谢，很抱歉成为这样的菜鸟。

这是一个小提琴： http : //jsfiddle.net/matt_f/e58hk/

这是脚本：

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 class=evidencemenu onchange="Cng(this);" >
        <option value="" >Please select</option>

        <!--USE THIS OPTION FOR TESTING  -->
        <option value="grade3art" >Grades 3-5 Art</option>
      </select>
      <select class=evidencemenu onchange="Cng(this);" >
        <option value="" >Please select</option>
        <!--USE THIS OPTION FOR TESTING  -->
        <option value="grade6ela" >Grades 6-8 ELA</option>

      </select>
      <select class=evidencemenu 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>

    <TABLE width="960" border="1" cellspacing="0" cellpadding="5" summary="Domain 1, Indicator 1a">
      <CAPTION>
      This is the table caption. </CAPTION>
      <TR>
        <TH scope="col">&nbsp;</TH>
        <TH scope="col">Below Standard</TH>
        <TH scope="col">Developing</TH>
        <TH scope="col">Proficient</TH>
        <TH scope="col">Exemplary</TH>
      </TR>
      <TR>
        <TD><STRONG>asfghsdfgsd</STRONG></TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
        <TD><EM>sdghsrthdfgbhdfgh</EM><EM></EM></TD>
      </TR>
      <TR>
        <TD valign="top"><STRONG>sdfgsdfgsdf</STRONG></TD>
        <TD valign="top">sdfghsdfg</TD>
        <TD valign="top">sdfghdsfghfd</TD>
        <TD valign="top"> dfghdfghf</TD>
        <TD valign="top">sfghdfghdfghdfg</TD>
      </TR>
      <!--HERE IS THE FIRST HIDDEN ROW.  IT IS SELECTED WITH THE FIRST DROP DOWN MENU. -->
      <TR valign="top" class=hide ID=grade3art>
        <TD><P><STRONG>Sample 
            Grades 3&ndash;5 hidden</STRONG></P>
          <P><EM>adfgsdfgsdfgsdfgs</EM></P>
          <P><EM>df</EM><EM>gs</EM><EM>dfgsd</EM></P></TD>
        <TD><P><STRONG><EM>hidden text goes here</EM></STRONG></P></TD>
        <TD><P><EM><STRONG>more hidden text goes here</STRONG></EM></P></TD>
        <TD><p><strong><em>third column of hidden text</em></strong></p></TD>
        <TD><p><strong><em>another column of hidden text</em></strong></p></TD>
      </TR>
      <TR>
        <TD valign="top"><STRONG>asdfjahs dlkfj<SPAN class="super"></SPAN></STRONG></TD>
        <TD valign="top">dafgsdfgsdfg</TD>
        <TD valign="top">sdfgsdfgsdfg</TD>
        <TD valign="top">sdfghsdfgsdfg</TD>
        <TD valign="top">sdfsdfgsdfg</TD>
      </TR>
      <!--HERE IS THE SECOND HIDDEN ROW. THIS IS SELECTED WITH THE SECOND DROPDOWN MENU.  -->
      <TR class=hide id="grade6ela">
        <TD valign="top"><P><STRONG>Sample </STRONG><STRONG>Grades 6-8 HIDDEN</STRONG></P></TD>
        <TD valign="top">TEST TO  ...</TD>
        <TD valign="top">PRETEND THAT....</TD>
        <TD valign="top">THIS IS..</TD>
        <TD valign="top">GRADE 6 ELA HIDDEN TEXT</TD>
      </TR>
      <TR>
        <TD valign="top"><STRONG>asfjal;skdjf</STRONG></TD>
        <TD valign="top">sadlkjasl;dkfj</TD>
        <TD valign="top">;salkdfjg sadl;fkgj</TD>
        <TD valign="top">a;lksjdfa;lskdfja;ls</TD>
        <TD valign="top">a;lskjfa;lskmnals;kd</TD>
      </TR>

CSS：

.hide {
display:none
}

Answer 1

我对您的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，以符合怪癖模式。 看起来现在可以正常工作，并在IE中使用HTML 4.01 Transitional标头进行了测试。