madscientist
asked on
Setting visibility of <optgroup> tag
Hi, I have a select box where I have some options grouped using the <optgroup> tag. I want to be able to toggle the visibility of one of the optgroups by setting its style to 'visibility: hidden; display: none;'. This works fine using firefox, but not using IE. Can anyone suggest why this isn't working with IE, and how I can make it work?
Simplified Code:
-----------------
<html>
<head>
<title>Optgroup Test</title>
<script type="text/javascript">
function toggle(obj) {
if (obj.style.visibility != "visible") {
obj.style.visibility = "visible";
obj.style.display = "";
} else {
obj.style.visibility = "hidden";
obj.style.display = "none";
}
}
</script>
</head>
<body>
<h1>Optgroup Test</h1>
<hr />
<form action="" method="post" enctype="multipart/form-da
<fieldset>
<select name="input" id="input">
<option value="">[Please select]</option>
<optgroup label="Group 1" id="optgroup1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2" id="optgroup2" style="visibility: visible; display: ;">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
<optgroup label="Group 3" id="optgroup3">
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</optgroup>
</select>
<br />
<input type="button" name="button" id="button" value="Toggle" onclick="toggle(document.g
</fieldset>
</form>
</body>
</html>
Simplified Code:
-----------------
<html>
<head>
<title>Optgroup Test</title>
<script type="text/javascript">
function toggle(obj) {
if (obj.style.visibility != "visible") {
obj.style.visibility = "visible";
obj.style.display = "";
} else {
obj.style.visibility = "hidden";
obj.style.display = "none";
}
}
</script>
</head>
<body>
<h1>Optgroup Test</h1>
<hr />
<form action="" method="post" enctype="multipart/form-da
<fieldset>
<select name="input" id="input">
<option value="">[Please select]</option>
<optgroup label="Group 1" id="optgroup1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2" id="optgroup2" style="visibility: visible; display: ;">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
<optgroup label="Group 3" id="optgroup3">
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</optgroup>
</select>
<br />
<input type="button" name="button" id="button" value="Toggle" onclick="toggle(document.g
</fieldset>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.