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

Peter Brunone (EasyListBox.com) peter at easylistbox.com
Tue Aug 24 11:26:26 CDT 2004


   In that case, I guess you'll need to store the original value when the page loads.  You can do this with a hidden form field, or a global Javascript variable if you like.  Either way, when you trigger the onChange event, you'll have to say "is the new value the same as the original (stored) value?" and if it is, you hide the div.

   Also, I noticed that you're still calling the old showHide function below.  Do you have that working yet?

Cheers,

Peter

Original Message:
>From: Jono <ox4dboy at comcast.net>
>To: "thelist at lists.evolt.org peter at easylistbox.com," <thelist at lists.evolt.org>
>Subject: Re: [thelist] How to Show/Hide if an option is selected in a pull-down
>Date: Tue, 24 Aug 2004 12:01:50 -0400

>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 <!-- comments --> 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>
>        
>
>-- 
>
>News! - Evolt.org conference for web professionals. 
>17-19 September 2004 in Toronto, Canada. 
>Details at http://TOevolt.org
>
>* * Please support the community that supports you.  * *
>http://evolt.org/help_support_evolt/
>
>For unsubscribe and other options, including the Tip Harvester 
>and archives of thelist go to: http://lists.evolt.org 
>Workers of the Web, evolt ! 
>
>




More information about the thelist mailing list