Subitems in combo box

Is it possible to add subitems to a combo box, similar to the idea of optgroups in a select widget?

see below some testing I've been doing.

I have added some control-activation visual appearance:
- defining some widths and heights in order to make the combo look better,
- combo not editable like classic select control,
- implementing a solution for something like optgroups (and in addition I apply an alternate style for the options in combo control that reset after each optgroup is found).

The optgroup is a normal item, but I apply some styles to it in order to make it look non clickable and non selectable (I didn't handle the up and down keys so the effect is available when using the mouse) and I overwrite the onItemClicked function by using AW.setReturnValue(event, false); which will cause the click event to be dropped instead of using the implementation for onItemClicked bundled in AW

some extra css
.aw-optgroup-item {font-style: italic;
                      font-weight:bold;
                      background-color:#C3DAF9!important;
                      color:black!important
   }
   .aw-alternate-even {background: #ecf5ff;}
   .aw-alternate-odd {background: #ffffff} 

  .aw-control-activated {border:1px SOLID gray!important}
  subclassing the Combo in order to create a "clean" object
I add a prototype method named updateControl that contains a couple of methods and properties that I use for the control.

So if I do not call for the instance of the object "updateControl" method it should behave like the "default" combo;
AW.UI.ToolbarCombo = AW.UI.Combo.subclass();
 
 AW.UI.ToolbarCombo.prototype.updateControl = function(minWidth,minListWidth,maxHeight)
 {
  this.onControlActivated = function(event){
          this.getContent('box').setClass('control', 'activated'); 
 }

 this.onControlDeactivated = function(event){  
    this.hidePopup();   
    this.getContent('box').setClass('control', '');
    
 }
  
 this.maxHeight = maxHeight;
 this.minListWidth = minListWidth;
 this.minWidth = minWidth;
 this.itemHeight = 16;
 this.sepHeight = 4;  
 this.setStyle('border-style','none');
 if (AW.ie) this.setStyle('margin-top','-1px');

 this.setSize(this.minWidth, this.itemHeight+this.sepHeight);  
 this.getPopupTemplate().setSize(this.minListWidth,Math.min(this.maxHeight,this.getItemCount()*this.itemHeight+this.sepHeight));     
  
 this.getPopupTemplate().setClass('list','control');  

 this.setOptgroups = function(optgroups)
 {
     this.optgroups = optgroups;
     for(var opts=0;opts < this.optgroups.length;opts++)
     {
        this.getItemTemplate(this.optgroups[opts]).setClass('optgroup','item');
     }
 }
 this.getItemTemplate().setClass("alternate", 
 function(){
     var optgroups = this.$owner.optgroups;
     var altCount = 0,ref=0;
     if (optgroups)
     for(var opts=0;opts < optgroups.length;opts++)
     {
      
        if (optgroups[opts] < this.getViewProperty("position"))
        {
          if (ref != optgroups[opts])
          {
            ref = optgroups[opts];
            altCount = 0;   
          };
          altCount ++;
        }
     }
     
     return (this.getViewProperty("position")-ref+altCount) % 2 ? "odd" : "even";
 
 }
     ); 

 this.getContent('box/text').setAttribute('readonly', true);
 this.getContent('box/text').setStyle('-moz-user-select', 'none');
 this.getContent('box/text').setAttribute('onselectstart','return false');
 
 
 this.onItemClicked = function(event,index)
 {
   for(var i = 0; i< this.optgroups.length;i++)
   {
    if (this.optgroups[i] == index)
    {
        AW.setReturnValue(event, false);    
        return 1;
    }
   }  
 }
 
 }
  usage:
var fluna_values = [ '','',12,1,2,
                        '',3,4,5,
                        '',6,7,8,
                        '',9,10,11];
 var fluna_text = [ '-month-', 'Winter', 'december','january','february',
                               'Spring', 'march','april','may',
                               'Summer', 'june','july','august',
                               'Autumn', 'september','october','november'];
var fluna = new AW.UI.ToolbarCombo;
 fluna.setId('fluna');
 fluna.setItemText(fluna_text);
 fluna.setItemValue(fluna_values);

 fluna.setControlText(fluna_text[0]);
 fluna.setControlValue(fluna_values[0]);

 fluna.setItemCount(fluna_values.length);
 fluna.updateControl(80,78,100);//width, width,height
 fluna.setOptgroups([1,5,9,13]);// set the optgroups indexes 
 

Is it possible to implement an effect similar to Mac IE 5 (http://www.websiteoptimization.com/speed/4/4-7.html) where the optgroup is actually a menu with an arrow to open a submenu containing the actual options? I have 20 optgroups w/ 20 options each. With the standard select implementation this results in 400 items making the list very hard to navigate.