[thelist] How to Show/Hide if an option is selected in a pull-down

Tue Aug 24 11:01:50 CDT 2004

On 8/24/04 10:17 AM, "Peter Brunone (EasyListBox.com)"
<peter at easylistbox.com> wrote:

> Ah, that one!  Well then, you'll need a little extra code for the invisible
> element (the form field code should still work just fine).  I wrote an article
> a few years back that dealt with Hiding/Showing for NS4-7 and IE4-6... ignore
> the ASP stuff, but the javascript should be what you need.
> 
> http://aspalliance.com/peterbrunone/pleaseWait.asp
> 
> Cheers,
> 
> Peter

Thank you, it is getting better, almost there. I just have one more
question:  If the user selects "Secondary" form the pull-down, the hidden
<div> appears.  Great!  So, now I need the <div> to become hidden again if
the user switches back to the original option.  Is this easily done?  There
are 2 options in the pull-down, one will show the <div> and the other, if
the <div> is currently shown, will hide the <div> again.  Below are snips of
code from the page in question, along with  to make it
easier to follow.  Can you help me with this...again?  Thank you very much
for your help thus far!

<head>
<script language="JavaScript" type="text/javascript">
<!--

 // This script is intended for use with a minimum of Netscape 4 or IE 4.
// First we detect the browser type
                if(document.getElementById) { // IE 5 and up, NS 6 and up
                        var upLevel = true;
                        }
                else if(document.layers) { // Netscape 4
                        var ns4 = true;
                        }
                else if(document.all) { // IE 4
                        var ie4 = true;
                        }

                function showObject(obj) {
                        if (ns4) {
                                obj.visibility = "show";
                                }
                        else if (ie4 || upLevel) {
                                obj.style.visibility = "visible";
                                }
                        }
                function hideObject(obj) {
                        if (ns4) {
                                obj.visibility = "hide";
                                }
                        if (ie4 || upLevel) {
                                obj.style.visibility = "hidden";
                                }
                        }

function showHide (id)
{ 
 var style = document.getElementById(id).style
 if (style.visibility == "hidden")
  style.visibility = "visible";
 else  
  style.visibility = "hidden";
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</head>

<html>
<!-- Snip of code that has the pulldown menu that triggers show/hide -->
<tr> 
    <td>&nbsp;</td>
    <td align="right" valign="middle" bgcolor="E3E3E3">Service Type</td>
    <td align="left" valign="top" bgcolor="E3E3E3"><select name="select3"
onChange="showHide(this.options[selectedIndex].value);">
      <option value="dns1">Primary</option>    <!-- If this is selected hide
<tr id="dns2" -->
      <option value="dns2">Secondary</option>  <!-- If this is selected show
<tr id="dns2" -->
      </select></td>
    <td>&nbsp;</td>
</tr>

<!-- Snip of code that has the area to be shown/hidden
depending on the option selected in the pull-down menu -->
<table>
<tr id="dns2" style="visibility: hidden;">
     <td colspan="4" align="center">
        <table border="0" cellspacing="0" cellpadding="7" width="100%">
            <tr>
                <td align="left" valign="top">&nbsp;</td>
                <td width="33%" align="right" valign="top"><b>Secondary
Service Type</b></td>
                <td align="left" valign="top">&nbsp;</td>
                <td align="left" valign="top">&nbsp;</td>
            </tr>
            <tr>
                <td align="right" valign="top">&nbsp;</td>
                <td align="right" valign="top" bgcolor="E3E3E3">&nbsp;</td>
                <td align="left" valign="top" bgcolor="E3E3E3"
class="small">Select a primary name server to change the<br> manager status
from incomplete to active.</td>
                <td align="left" valign="top">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td align="right" valign="middle">Primary Name Server</td>
                <td align="left" valign="top"><select name="select">
                    <option selected>Choose one...</option>
                    <option value="dns1">123.456.789.012</option>
                    <option value="dns2">123.456.789.013</option>
                    </select></td>
                   <td align="left" valign="top">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td align="right" valign="middle" bgcolor="E3E3E3">Primary
Name Server Backup</td>
                <td align="left" valign="top" bgcolor="E3E3E3"><select
name="select2">
                    <option selected>Choose one...</option>
                    <option value="dns1">123.456.789.012</option>
                    <option value="dns2">123.456.789.013</option>
                   </select></td>
                 <td align="left" valign="top">&nbsp;</td>
            </tr>
           </table>
       </td>
    </tr>
</table>