在Ember.js中创建分组选择

ember generate component grouped-select

  {{#each-in groups as |group groupOptions|}}
    <optgroup label={{group}}>
      {{#each groupOptions as |option|}}
       <option value={{option.value}}>{{option.label}}</option>
      {{/each}}
    </optgroup>
  {{/each-in}}
</select>

import Component from '@ember/component';

export default Component.extend({
  groups: {
    'Group 1': [
      { label: 'Option 1', value: '1' },
      { label: 'Option 2', value: '2' },
    ],
    'Group 2': [
      { label: 'Option 3', value: '3' },
      { label: 'Option 4', value: '4' },
    ],
  },
});

{{grouped-select}}