Tags already built into html optgroup give us a way to separate by category already... doing anything beyond this adds accessibility issues we have to be careful with, however:

Bootstrap has the dropdown menu we are using, could be manipulated to be a control with some effort (accessibility issues also)

Someone has made a plugin that works within bootstrap that does what we want essentially (looks nice, we would have to make it accessible somehow)
http://silviomoreto.github.io/bootstrap-select/

Accessibility read:
http://www.456bereastreet.com/archive/201111/an_accessible_keyboard_friendly_custom_select_menu/

It looks like we either need to use standard tags or apply aria roles manually to achieve accessiblity using listbox and option roles among others, with aria-selected attribute see:
http://oaa-accessibility.org/examples/role/82/

See for a good custom dropdown implementation (not what we want to use but what we need achieve):
http://dojotoolkit.org/reference-guide/1.9/dijit/form/Select.html#dijit-form-select

All things considered this is the one we should go with for maximum support (if customizing the dropdown style is needed):
http://wiki.jqueryui.com/w/page/12138056/Selectmenu

Current recommendation is to use Bootstrap select plugin but use the jquery ui dropdown as a guide to modify it to meet accessibility standards

Decision from UXI group was to just implement the html optgroup option from dropdowns. Note optgroup has a disabled option as well we should support. Not sure about multi-select support?

Verified that its supported the same way in the multi-select scenario so we should support both

Added support of HTML optgroup. Sample config:

<bean parent="Uif-DropdownControl" p:multiple="true">
<property name="options">
<list>
<bean parent="Uif-OptionGroupLabel" p:label="American"/>
<bean parent="Uif-KeyLabelPair" p:key="a1" p:value="Ford"/>
<bean parent="Uif-KeyLabelPair" p:key="a2" p:value="Chevy"/>
<bean parent="Uif-KeyLabelPair" p:key="a3" p:value="Buick"/>
<bean parent="Uif-OptionGroupLabel" p:label="Japan"/>
<bean parent="Uif-KeyLabelPair" p:key="j1" p:value="Toyota"/>
<bean parent="Uif-KeyLabelPair" p:key="j2" p:value="Honda"/>
</list>
</property>
</bean>

Another Bootstrap plugin that looks a little better (in case we come back to this):

http://davidstutz.github.io/bootstrap-multiselect/