Question

We determined in a previous question that many features of HTML SELECTs are not supported in IE. Is there an alternative widget that you would recommend from your experience that meets the following requirements?

1. Respects the contentEditable property (does not allow selection changes if true)
2. Respects the disabled property of individual OPTIONs (shows them ‘grayed out’ or with strike-through font, and makes them un-selectable)
3. Supports Option Groups (OPTGROUP elements)
4. Supports style options such as border and margin in the SELECT and all sub-elements
5. Supports dynamic add and delete of OPTION and OPTGROUP elements
6. Supports the above in IE version 6 and above

EDIT: As noted by @Joel Coehoorn, items 3 and 5 above are currently supported in IE. They are included here to make sure they are not overlooked in a replacement widget.

Answer 1

At last check IE6+ does support #3 and #5, and you can (mis)use OPTGROUP to work around most of the other items.

You can do this by having an optgroup with no options inside it, like this:

<optgroup label='--'></optgroup> 

You can make the label anything you want, but the point is that you’ll end up with an item that looks like a normal option, but cannot be selected. That opens to the door to all kinds of fun:

• You can disable specific items by adding them as optgroups
• You can prevent selection changes by encoded all options but the current one as optgroups (use some other text key to indicate they are disabled, if you need to)
• You can use blank, –, or — labels to indicated simple separators rather than whole groups.

That accounts for most of #1 & #2 in your list, anyway- at least the functional points.

The reason for ‘(mis)use’ is because this won’t pass most html validators. However, the trick does work on all major browsers.