Please help tweak javascript so it works with multiple drop down menus to show/hide table rows

Question

I am using a script to show and hide table rows based on selections from a drop down list. It works fine with only one drop down. When I add additional drop down menus, however, it shows the hidden rows, but it won't hide the previous selection. So you end up with everything being show at once unless you manually reset the list. I am using css display: none to hide the table rows as the default state. The site I'm working on uses quirks mode. JQuery is not an option. I would really appreciate some help. I have to think the script could be tweaked so it will look at all the select lists. Thank you, and sorry for being such a noob.

Here's a fiddle: http://jsfiddle.net/matt_f/e58hk/

Here is the script:

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

Here is my 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>

The css:

.hide {
display:none
}

I don't think I am entirely understanding your problem. Can you give an example of a situation that isn't working as you intend? For example, When I select grades '3-5 ART' what is supposed to happen, then when I select 'grades 6-8 ELA' what is supposed to change? — wolffer-east, Aug 01 '14 at 18:16
@wolffer-east When you select grades 3-5 art, it shows the hidden row with the corresponding ID. When you select grades 6-8 ELA, it should hide grades 3-5 art and show grades 6-8 ELA. — Mt_F, Aug 01 '14 at 18:33
Why should it hide those elements? 3-5 art is still selected in another dropdown, and should thus be shown. You could unselect the other dropdowns on change which should hide those elements — wolffer-east, Aug 01 '14 at 18:36
@Shmiddty I think a better solution is to use class names, but as far as I can figure out, that won't work in IE 8 and below. I need a solution that works in IE 7 or above. I tried adding an "else" statement to display none again, but that didn't work. Sorry I can't explain it better. — Mt_F, Aug 01 '14 at 18:36
Side note on class names: you don't have quotes around yours, which probably isnt helping — wolffer-east, Aug 01 '14 at 18:38
@wolffer-east I agree, unselecting works fine, and it might be nice to be able to see three hidden rows at a time, but the expectation is that selecting one hides another. I need the script to unselect no matter which drop down menu is being used. I appreciate your insight. — Mt_F, Aug 01 '14 at 18:44

wolffer-east · Answer 1 · 2014-08-04T17:47:41.057

I made some quick updates to your html to facilitate a solution:

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

Note the quotes around the classes, and the added ids

then I changed the js function slightly:

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

This iterates through all of the select options, sets the hidden rows to hidden, and sets them all to blank if they are not the current item. Check out the updated fiddle here

EDIT: I changed the classes into names, and the js function to getElementsByName in order to comply with quirks mode. Looks to be working now, tested in IE with an HTML 4.01 Transitional header.

This is fantastic and I really appreciate your input, but it uses getElementsByClassName, which doesn't work in quirks mode. Is there any way to do it using getElementById? The final version will have several more hidden rows than this. Should I just give each row an ID and repeat getElementById multiple times? Thanks for all your help. — Mt_F, Aug 01 '14 at 19:17
If document.getElementsByTagName works you can grab all of the selects on the page, then check if it has the correct class on it. check out this post for a javascript implementation of hasClass: http://stackoverflow.com/questions/5085567/hasclass-with-javascript-or-site-with-jquery-to-javascript-translation. Put the test in the for loop, and then, if it has the correct class, run the id test. — wolffer-east, Aug 03 '14 at 16:33

Please help tweak javascript so it works with multiple drop down menus to show/hide table rows

1 Answers1