"veganeater" <veganeater.nospammers@gmail.com> wrote in message
news:2vadnTdFrcAaH3DcRVn-ug@rogers.com...[color=blue]
> 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[/color]
selection[color=blue]
> 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[/color]
it...[color=blue]
> If anyone can point me in the right direction, it would be greatly
> appreciated.
>[/color]
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.
