Disabled menu item workaround for Internet Explorer

Internet Explorer does not support the “DISABLED” attribute for HTML form menu items (aka the “SELECT” tag). (Here’s a nice explanation of the issue by Allistair Lattimore.)

He also came up with a pretty elegant javascript solution.

But it didn’t really work well for me because I already had too much dynamic HTML on the page and it just added to the complexity. Also, with the javscript solution you’re still able to select the disabled menu item — it simply reverts to your prior selection if you select a disabled item. It does the job, but you’re only getting feedback AFTER you make your selection, and even then it’s easily missed.

One of the comments on the javascript solution page hinted at an even more elegant solution, though it wasn’t immediately obvious why it was a solution: use the “OPTGROUP” tag. It ends up, this is a VERY elegant solution that doesn’t require javascript at all. Here’s how it works…

The key is to replace your disabled “OPTIONS” with an “OPTGROUP”. Why does this work?

Drawbacks to this approach:

Here’s how my solution looked: (I’m only including the code for the IE version, I simply used the ‘disabled’ attribute for the non-IE browsers.)

This javascript snippet constructs the option items in the menu:

if ( isDisabled ) {
    //  disabled, use optgroup to emulate
    s +=    '< optgroup label="   ' + label + '" 
        style="color:graytext;font-style:normal;" >
        < /optgroup>';      
} else {
    //  not disabled, use option
    s +=    '< option value="' + value + '">   ' + label + 
        '< /option>';       
}

The key points:

For example, my menu looks something like this (“White Population” is disabled):

< select>
    < optgroup label="Industrial">< /optgroup>
        < option>   Industrial Jobs< /option>
        < option>   Industrial Wages< /option>
    < optgroup label="Race">< /optgroup>
        < option>   Total Population< /option>
        < optgroup label="   White Population" 
            style="color:graytext;font-style:normal;" >
            < /optgroup>
        < option>   African American Population< /option>
< /select>

As far as I can tell, it doesn’t look like Microsoft is going to fix this in IE7 either: lotta ranting here.

posted March 21, 2006 by ben

View three comments:

Ben,

I've actually used the before as a solution, it works well in the cases where its suited. In the case of my particular post, I was just annoyed that IE didn't support such a simple attribute, so I looked for a solution that didn't require changing the HTML. The other thing you could potentially do, is replace the with a JavaScript equivalent on the fly; much like the example at http://www.easy-designs.net/.

Al.
Alistair () (link) - 21 03 06 - 03:40

Hi Al. Yeah, I was quite flabbergasted myself when I found that IE didn't support such a basic tag. Your page was a huge help in sending me in the right direction. Keeping the HTML pristine does have its merits. In my case, it was simpler to change it. I suppose I could try an approach where the HTML stays pristine, and I just use javascript to go in and change the various elements to OPTGROUPS, but that might be just as messy. Anyway, thanks for the additional tip.
Ben () (link) - 21 03 06 - 16:30

This solution is great - elegant and simple. Thank you!
Boris () (link) - 30 09 09 - 16:04


Name:  
Remember personal info?

Email:
URL:
Comment:Emoticons /
Comment spam is an unfortunate problem on our site. Making you answer an Obvious Question is one way to defeat the spambots.
Obvious Question: How many states are in the United States (50)?




Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.