"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.
