Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Show/Hide Layers based on form option

Reply
Thread Tools

Show/Hide Layers based on form option

 
 
veganeater
Guest
Posts: n/a
 
      01-18-2005
Hi,

I'm wondering if there's a way that I can select which <div> to show based
on the user's selection from a dropdown/listbox form.

<form name="form1" method="post" action="">
<select name="internet">
<optgroup label="Network">
<option label="option1">Internet</option>
</optgroup>
<optgroup label="Access">
<option label="option2.0">Portal</option>
<option label="option2.1">Webmail</option>
<option label="option2.2">POP3 Email</option>
<option label="option2.3">Messenger</option>
<option label="option2.4">Newsgroups</option>
</optgroup>
</select>
</form>

Is there a way that I can have a particular <div> show based on a selection
from this list? I know that you can not directly apply actions to the
options, so it presumably there has to be a javascript method of doing it...
If anyone can point me in the right direction, it would be greatly
appreciated.

Thanks in advance!

|veganeater|

// my apologies for the xpost on comp.lang.java.javascript


 
Reply With Quote
 
 
 
 
Dag Sunde
Guest
Posts: n/a
 
      01-18-2005
"veganeater" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Hi,
>
> I'm wondering if there's a way that I can select which <div> to show based
> on the user's selection from a dropdown/listbox form.
>
> <form name="form1" method="post" action="">
> <select name="internet">
> <optgroup label="Network">
> <option label="option1">Internet</option>
> </optgroup>
> <optgroup label="Access">
> <option label="option2.0">Portal</option>
> <option label="option2.1">Webmail</option>
> <option label="option2.2">POP3 Email</option>
> <option label="option2.3">Messenger</option>
> <option label="option2.4">Newsgroups</option>
> </optgroup>
> </select>
> </form>
>
> Is there a way that I can have a particular <div> show based on a

selection
> from this list? I know that you can not directly apply actions to the
> options, so it presumably there has to be a javascript method of doing

it...
> If anyone can point me in the right direction, it would be greatly
> appreciated.
>


the label attribute for the option element is not in use by any browser
I know of...

Here is a crude example:

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>TestPage</title>

<script type="text/javascript">
function internetSelect() {
var selectedValue = document.getElementById("internet").value;
document.getElementById("opt10").style.visibility = "hidden";
document.getElementById("opt20").style.visibility = "hidden";
document.getElementById("opt21").style.visibility = "hidden";
document.getElementById("opt22").style.visibility = "hidden";
if(selectedValue == "option10")
document.getElementById("opt10").style.visibility = "visible";
if(selectedValue == "option20")
document.getElementById("opt20").style.visibility = "visible";
if(selectedValue == "option21")
document.getElementById("opt21").style.visibility = "visible";
if(selectedValue == "option22")
document.getElementById("opt22").style.visibility = "visible";
}
</script>
</head>

<body onload="internetSelect();">
<select id="internet" onchange="internetSelect();">
<optgroup label="Network">
<option value="option10">Internet</option>
</optgroup>
<optgroup label="Access">
<option value="option20">Portal</option>
<option value="option21">Webmail</option>
<option value="option22">POP3 Email</option>
</optgroup>
</select>

<div id="opt10" style="background-color:#00FFFF; visibility:hidden;
border: 1px solid black;">
<h2>Internet</h2>
</div>
<div id="opt20" style="background-color:#FFFF00; visibility:hidden;
border: 1px solid black;">
<h2>Portal</h2>
</div>
<div id="opt21" style="background-color:#FF99FF; visibility:hidden;
border: 1px solid black;">
<h2>Webmail</h2>
</div>
<div id="opt22" style="background-color:#9999FF; visibility:hidden;
border: 1px solid black;">
<h2>POP3 Email</h2>
</div>


</body>
</html>


--
Dag.


 
Reply With Quote
 
 
 
 
RobB
Guest
Posts: n/a
 
      01-19-2005
veganeater wrote:
> Hi,
>
> I'm wondering if there's a way that I can select which <div> to show

based
> on the user's selection from a dropdown/listbox form.
>
> <form name="form1" method="post" action="">
> <select name="internet">
> <optgroup label="Network">
> <option label="option1">Internet</option>
> </optgroup>
> <optgroup label="Access">
> <option label="option2.0">Portal</option>
> <option label="option2.1">Webmail</option>
> <option label="option2.2">POP3 Email</option>
> <option label="option2.3">Messenger</option>
> <option label="option2.4">Newsgroups</option>
> </optgroup>
> </select>
> </form>
>
> Is there a way that I can have a particular <div> show based on a

selection
> from this list? I know that you can not directly apply actions to the
> options, so it presumably there has to be a javascript method of

doing it...
> If anyone can point me in the right direction, it would be greatly
> appreciated.
>
> Thanks in advance!
>
> |veganeater|
>
> // my apologies for the xpost on comp.lang.java.javascript


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

..showhide {
width: 130px;
height: 16px;
font-weight: 800;
text-align: center;
border: 2px black dashed;
display: none;
}

</style>
<script type="text/javascript">

var divs = {
'option1' : 'InternetDIV' ,
'option2.0' : 'PortalDIV' ,
'option2.1' : 'WebmailDIV' ,
'option2.2' : 'POP3DIV' ,
'option2.3' : 'MessengerDIV' ,
'option2.4' : 'NewsgroupsDIV'
}

function showhide(obj)
{
var el, v = obj.options[obj.selectedIndex].value;
for (var opt in divs)
if (el = document.getElementById(divs[opt]))
el.style.display = (opt != v) ? 'none' : 'block';
}

window.onload = function()
{
document.getElementById('internet').onchange();
}

</script>
</head>
<body>
<form name="form1" method="post" action="">
<select id="internet" name="internet" onchange="showhide(this)">
<optgroup label="Network">
<option value="option1" selected="selected">Internet</option>
</optgroup>
<optgroup label="Access">
<option value="option2.0">Portal</option>
<option value="option2.1">Webmail</option>
<option value="option2.2">POP3 Email</option>
<option value="option2.3">Messenger</option>
<option value="option2.4">Newsgroups</option>
</optgroup>
</select>
</form>
<div id="InternetDIV" class="showhide">Internet</div>
<div id="PortalDIV" class="showhide">Portal</div>
<div id="WebmailDIV" class="showhide">Webmail</div>
<div id="POP3DIV" class="showhide">POP3 Email</div>
<div id="MessengerDIV" class="showhide">Messenger</div>
<div id="NewsgroupsDIV" class="showhide">Newsgroups</div>
</body>
</html>

 
Reply With Quote
 
veganeater
Guest
Posts: n/a
 
      01-19-2005
Wow, thanks guys!

I was concerned that it would be far more difficult then it apparently is -
or as you made it look.

Dag Sunde - I understand your concern about the use of the label descriptor
on the options tag being supported on all browsers. Unfortunalty - and much
to my shgrin - I'm designing a small application that is intended to run
/only/ on MSIE6+. Kind of a pain as I, myself, use Opera... oh, well...

Anyhow, thanks again!

|veganeater|


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
change form action based on select option Arthur Javascript 6 06-17-2007 04:15 PM
Subnets between core and access/distribution layers & routing between layers J Cisco 0 12-13-2006 08:38 PM
Form option list adding a 2nd option based upon the first. mike.a.rea@gmail.com Javascript 7 02-17-2006 02:13 AM
g++ -pg option and -shared option Julien ROUZIERES C++ 1 12-21-2004 02:30 PM
layers and form tags Johan Louwers HTML 3 06-03-2004 03:24 PM



Advertisments