473,546 Members | 2,244 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Show/Hide Layers based on form option

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">Newsgroup s</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
3 10181
"veganeater " <ve************ *******@gmail.c om> wrote in message
news:2v******** ************@ro gers.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">Newsgroup s</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=is o-8859-1">
<title>TestPage </title>

<script type="text/javascript">
function internetSelect( ) {
var selectedValue = document.getEle mentById("inter net").value;
document.getEle mentById("opt10 ").style.visibi lity = "hidden";
document.getEle mentById("opt20 ").style.visibi lity = "hidden";
document.getEle mentById("opt21 ").style.visibi lity = "hidden";
document.getEle mentById("opt22 ").style.visibi lity = "hidden";
if(selectedValu e == "option10")
document.getEle mentById("opt10 ").style.visibi lity = "visible";
if(selectedValu e == "option20")
document.getEle mentById("opt20 ").style.visibi lity = "visible";
if(selectedValu e == "option21")
document.getEle mentById("opt21 ").style.visibi lity = "visible";
if(selectedValu e == "option22")
document.getEle mentById("opt22 ").style.visibi lity = "visible";
}
</script>
</head>

<body onload="interne tSelect();">
<select id="internet" onchange="inter netSelect();">
<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="backgrou nd-color:#00FFFF; visibility:hidd en;
border: 1px solid black;">
<h2>Internet</h2>
</div>
<div id="opt20" style="backgrou nd-color:#FFFF00; visibility:hidd en;
border: 1px solid black;">
<h2>Portal</h2>
</div>
<div id="opt21" style="backgrou nd-color:#FF99FF; visibility:hidd en;
border: 1px solid black;">
<h2>Webmail</h2>
</div>
<div id="opt22" style="backgrou nd-color:#9999FF; visibility:hidd en;
border: 1px solid black;">
<h2>POP3 Email</h2>
</div>
</body>
</html>
--
Dag.
Jul 23 '05 #2
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">Newsgroup s</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.selectedInd ex].value;
for (var opt in divs)
if (el = document.getEle mentById(divs[opt]))
el.style.displa y = (opt != v) ? 'none' : 'block';
}

window.onload = function()
{
document.getEle mentById('inter net').onchange( );
}

</script>
</head>
<body>
<form name="form1" method="post" action="">
<select id="internet" name="internet" onchange="showh ide(this)">
<optgroup label="Network" >
<option value="option1" selected="selec ted">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">Newsgroup s</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="MessengerDI V" class="showhide ">Messenger </div>
<div id="NewsgroupsD IV" class="showhide ">Newsgroup s</div>
</body>
</html>

Jul 23 '05 #3
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
148536
by: Steve Speirs | last post by:
Hi I'm trying to show/hide a simple piece of text and a text field on a form based on what choice is made from a drop down box. <select name="dropdown" size="1"> <option selected value="">Please make a selection</option> <option value="1">Choice 1</option> <option value="2">Choice 2</option> <option value="3">Choice 3</option>
10
3187
by: David | last post by:
Hi everyone, Hoping there are some .js/browser experts out there that can help with this weird problem. I have made a swap div routine and applied the events to menu buttons with a closer layer behind the menus. The closer div has a lower index than the submenu divs so it appears behind them. The closer div contains a transparent gif...
2
12175
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow { display: none; }
4
7986
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers) document.layers.visibility = 'visible'; else if (document.all) { document.all.style.visibility = 'visible';
3
6372
by: Merlin | last post by:
Hi there, I am trying to create a form with an dynamic field that can be shown or hidden. As I saw for example on google it is possible with JS to show a layer and move the content underneath that layer further down uppon showing this layer. When a person closes that layer the content underneath the layer moves up again and closes the empty...
1
4152
by: pamate | last post by:
hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. I don`t want to change the way i have used to show and hide layers. check down code :- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
3
7761
by: safiratec | last post by:
Hi, I want to show a div depending of the value of a <select> option, using 2 functions hidediv() and showdiv() - it is working fine in firefox, but not in IE (tested with IE 6 and 7). <body onload="javascript:hidediv()"> DOES work in IE, but the rest does not. Any ideas? Thanks a lot Tim here is the code ----------------------------
1
3786
oranoos3000
by: oranoos3000 | last post by:
hi would you please help me i have a online shopping center that i show pictures of the my product in home page. in the InterExplorer pictures is shown correctly but in Firefox browser is shown properties alt in img tag istead of picture . place of the pictures is saved in the database(my database is with mysql) and in home page i fetch...
0
7507
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7435
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7794
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6030
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5080
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3492
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3472
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1922
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1046
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.