drop down test

three menus, one script that controls them all

by matt_f

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>
       ...

CSS

.hide {
    display:none
    }

JavaScript

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'; 
  } 
 }
}