Setting visibility of <optgroup> tag

Posted on 2006-06-03
Last Modified: 2012-06-27
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:

      <title>Optgroup Test</title>
      <script type="text/javascript">
      function toggle(obj) {
            if ( != "visible") {
         = "visible";
         = "";
            } else {
         = "hidden";
         = "none";
<h1>Optgroup Test</h1>
<hr />
<form action="" method="post" enctype="multipart/form-data">
            <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 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 label="Group 3" id="optgroup3">
                        <option value="7">Option 7</option>
                        <option value="8">Option 8</option>
                        <option value="9">Option 9</option>
            <br />
            <input type="button" name="button" id="button" value="Toggle" onclick="toggle(document.getElementById('optgroup2'));" />
Question by:madscientist
    1 Comment
    LVL 30

    Accepted Solution

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now