form.handlebars

{{view Ember.GroupedSelect
  groupedContentBinding="App.groupedServiceCodes"
  contentBinding="App.flattenedServiceCodes"
  selectionBinding="service_code"
  optionLabelPath="content.description"
  optionValuePath="content.id"
}}

<!-- groupedServiceCodes is an array of Ember.Objects with a label, and content -->
<!-- flattenedServiceCodes is the content arrays from groupedServiceCodes concatted together so they have the same order as the select -->

grouped_select.js

Ember.GroupedSelect = Ember.Select.extend({
  classNames: ['ember-grouped-select'],
  defaultTemplate: Ember.Handlebars.compile('{{#if view.prompt}}<option value>{{view.prompt}}</option>{{/if}}{{#each view.groupedContent}}{{view Ember.SelectOptGroup labelBinding="label" contentBinding="content"}}{{/each}}'),
});

Ember.SelectOptGroup = Ember.View.extend({
  tagName: 'optgroup',
  classNames: [],
  attributeBindings: ['label'],
  defaultTemplate: Ember.Handlebars.compile('{{#each this.content}}{{view Ember.SelectOption contentBinding="this"}}{{/each}}'),

  // proxy to the Select
  optionLabelPath: function() {
    return Ember.getPath(this, 'parentView.optionLabelPath');
  }.property('parentView.optionLabelPath'),
  optionValuePath: function() {
    return Ember.getPath(this, 'parentView.optionValuePath');
  }.property('parentView.optionValuePath'),
  selection: function() {
    return Ember.getPath(this, 'parentView.selection');
  }.property('parentView.selection'),
  multiple: function() {
    return Ember.getPath(this, 'parentView.multiple');
  }.property('parentView.multiple')
});