"Headers" or disabled items in select list.

Question

This used to work...
SELECT d, r
FROM (SELECT tr.description d, TO_CHAR (tr.ID) r,
tgr.description grouporder, tr.description toolorder
FROM hr.bi_tools_reg tr JOIN hr.bi_tools_group_reg tgr
ON tr.GROUP_ID = tgr.ID
WHERE tr.ID NOT IN (
SELECT brc.comp_id
FROM hr.bi_register_competence brc
WHERE brc.user_name = :app_user
AND brc.comp_type_id = 2
AND brc.comp_id IS NOT NULL)
UNION
SELECT '   ---' || tgr.description || '---' d, ID || '" disabled="disabled' r,
tgr.description grouporder, 'a' toolorder
FROM hr.bi_tools_group_reg tgr)
ORDER BY grouporder, toolorder
Creating a list of greyed-out ---Description--- in the second select and the selectable items in the first select and then merging them into one list in the proper order. Resulting in a list with headers that are non-selectable and a number of selectable items below each of them...
Suddenly It doesn't work anymore (with ie 8.0.7600 and APEX 4 as opposed to working in 8.0.6001 and APEX 3.2.1)
the workin header rows look like this in the html source
<option value="3" disabled="disabled">   ---Microsoft---</option>
and in the newer ie they look like this:
<option value="3&quot; disabled=&quot;disabled">&amp;nbsp;&amp;nbsp;&amp;nbsp;---Microsoft---</option>
Any ideas on how to get around this?

Answer 1

This is due to select list <tt>option</tt>s now being HTML-escaped in APEX 4.0. See +{thread:id=2126522}+
Use the -capable select list plug-in<tt>optgroup</tt>-capable select list plug-in instead.
(When posting code, please \...\wrap it in <tt>\...\</tt> tags.)