[thelist] How to Show/Hide if an option is selected in a pull-down
Jono
ox4dboy at comcast.net
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 <!-- 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> </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> </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"> </td>
<td width="33%" align="right" valign="top"><b>Secondary
Service Type</b></td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td align="right" valign="top" bgcolor="E3E3E3"> </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"> </td>
</tr>
<tr>
<td> </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"> </td>
</tr>
<tr>
<td> </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"> </td>
</tr>
</table>
</td>
</tr>
</table>
More information about the thelist
mailing list