Is There A Fully-functional Dropdown Replacement For HTML SELECT That Works In IE?
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?
- Respects the
contentEditable
property (does not allow selection changes if true) - Respects the
disabled
property of individual OPTIONs (shows them "grayed out" or with strike-through font, and makes them un-selectable) - Supports Option Groups (
OPTGROUP
elements) - Supports
style
options such asborder
andmargin
in theSELECT
and all sub-elements - Supports dynamic add and delete of
OPTION
andOPTGROUP
elements - 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
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.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM