Show/Hide Div based on Drop Down Selection

pmagony
pmagony used Ask the Experts™
on
Hi,

I have a drop down menu that should hide a specific div (A), and reveal another div (B) based on the selection. Here's what I have so far, I am able to reveal div (B) but I'm missing the ability to hide div (A).  Both of these actions should be executed based on a single selection from the drop down list. Any help is greatly appreciated.
<script type="text/javascript">
	/* <![CDATA[ */
	  function showMBPS(selectCS,rowID) {
		  if(selectCS == "Carrier Ethernet") {
			  document.getElementById(rowID).style.display='';
		  }
		  else
		  {
			  document.getElementById(rowID).style.display='none';
		  }
	  }
	  /*]]>*/
	</script>
 
Drop Down List
 
<select name="tos" id="tos" style="width:120px;" onchange="showMBPS(this.options[this.selectedIndex].value, 'mbps');">
...
</select>
 
DIV A
<div id="cSpeed"></div>
 
DIV B
<div id="mbps" style="display:none;"></div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Lead Software Engineer
Commented:
Are you looking for this?
<select name="tos" id="tos" style="width:120px;" onchange="showMBPS(this.options[this.selectedIndex].value, 'mbps', 'cSpeed');">
...
</select>
 
          function showMBPS(selectCS,rowID,otherRowID) {
                  if(selectCS == "Carrier Ethernet") {
                          document.getElementById(rowID).style.display='block';
document.getElementById(otherRowID).style.display='none';
                  }
                  else
                  {
                          document.getElementById(rowID).style.display='none';
document.getElementById(otherRowID).style.display='block';
                  }
          }

Open in new window

Author

Commented:
This works exactly as I needed it... however, in testing it out, I realized that i missed something obvious.  Above each drop-down field and above each text field, I have a text-based label to "label" that field.  When the events are triggered, the fields disappear but the labels remain, and this is confusing as they do not coorelate.

So I wrapped the label's in <span> tags and augmented your suggestion with yet another line of code:

  <script type="text/javascript">
      /* <![CDATA[ */
        function showMBPS(selectCS,rowID,divID,spanID) {
              if(selectCS == "Carrier Ethernet") {
                    document.getElementById(rowID).style.display='';
                    document.getElementById(divID).style.display='none';
                    document.getElementById(spanID).style.display='none';
              }
              else
              {
                    document.getElementById(rowID).style.display='none';
                    document.getElementById(divID).style.display='block';
                    document.getElementById(spanID).style.display='block';
              }
        }
        /*]]>*/
      </script>

The problem is, is that the span tags won't disappear?

Author

Commented:
Nevermind, I had mis-targeted the ID in the onchange function.  Thanks for your help, really appreciate it!

Author

Commented:
Right on...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial