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?
OPTGROUPS are already “disabled” — you can’t select them, so you get immediate feedback.
OPTGROUPS don’t look disabled, but you can use CSS to change the look.
Drawbacks to this approach:
You can’t nest OPTGROUPS (here’s the W3 spec on OPTGROUPS), so if you are already using OPTGROUPS, you’ll need to do a few more CSS tricks.
You have to construct the menu via code.
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:
Use the “LABEL” attribute to set the text that is displayed.
Set the color and font-style of the optgroup item to match disabled menu items.
Note that the OPTGROUP is empty.
Use non-breaking spaces to indent the menu items as a way to emulate a nested optgroup.
Use other empty OPTGROUP items (with no extra CSS formatting) to serve as the group headings.
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.
The maximum number of hyperlinks was exceeded. Stop spamming.
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
Yndpcwtp california road sign ueortndn [url=http://california-road-sign.d4pc.com]cal.. road sign[/url] jiqjmoo [link=http://california-road-sign.d4pc.com]cal.. road sign[/link] ksboatuu [url]http://california-road-sign.d4pc.com[/ur..]
Eidlt () (link) - 27 08 08 - 08:06