Show/Hide Layers based on form option

V

veganeater

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
 
D

Dag Sunde

veganeater said:
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>
 
R

RobB

veganeater said:
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>
 
V

veganeater

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|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top