By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,289 Members | 1,463 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,289 IT Pros & Developers. It's quick & easy.

Show/Hide Layers based on form option

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
"veganeater" <ve*******************@gmail.com> wrote in message
news:2v********************@rogers.com...
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.
Jul 23 '05 #2

P: n/a
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>

Jul 23 '05 #3

P: n/a
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|
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.