• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 738
  • Last Modified:

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-data">
      <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.getElementById('optgroup2'));" />
      </fieldset>
</form>
</body>
</html>
0
madscientist
Asked:
madscientist
1 Solution
 
GrandSchtroumpfCommented:
> Can anyone suggest why this isn't working with IE
Because IE does not support that.

> and how I can make it work?
You can use javascript to remove the optgroup node from the html.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now