Variable (dynamic) OPTION lists in HTML SELECT using IE

Question

I'm trying to implement a dynamic OPTION list in JavaScript. Depending on other selections in the web form, some of the OPTIONS in a specific SELECT are not valid. Things I've tried that don't work in IE are:

• populate all options, then set the disabled property for those that are invalid
• populate all options and use option groups, then disable invalid option groups
• I even tried using a style of text-decoration:line-through

At this point I'm resigned to repopulating the SELECT with only valid OPTIONs, but it seems like there ought to be a better way that actually works in IE. I require compatibility with IE6 and up. How have you dealt with this?

Answer 1

Is it such a problem to repopulate the select with just the valid options? I've used this method many times and haven't encountered any problems.

Answer 2

Unfortunately, just won't work in IE, was face palming repeatedly on this one a few weeks ago; gave up, just put in only valid options instead.

Did find this: http://elmicoxcodes.blogspot.com/2007/05/activating-option-disabled-in-ie.html,
and this: http://www.danieltome.com/blog/2007/08/16/disable-options-in-a-multiple-select-javascript-for-ie/
have not tried either yet, but may do the job for you.

Don't know if they are fixing it in IE 8.

In this case, select really is broken...

Answer 3

IE doesn't support the disabled attribute on options, and worse yet, IE doesn't support events on options, and the styling abilities are very limited in IE.

Until IE joins the rest of the browser world in terms of common support for basic elements and basic functionality, you are SOL.