New Twiddle

components.ted-select.js

import Ember from 'ember';
/* global $ */
// import layout from '../templates/components/ted-select';

export default Ember.Component.extend({
  // layout: layout,

  classNames: 'Ted-select',
  selectClassNames: null,
  content: Ember.A([]),
  optionValueKey: 'id',
  optionLabelKey: 'title',
  optionDisabledKey: null,
  selected: null,
  prompt: 'Select an option',
  sortBy: null,
  multiple: false,
  disabled: false,

  sortArray: Ember.computed('sortBy', function(){
    if (this.get('sortBy')){
      return this.get('sortBy').replace(' ', '').split(',');
    }
    return [];
  }),

  sortedContent: Ember.computed.sort('content', 'sortArray'),

  actions: {
    onChange(target){
      let value = $(target).val(),
          selection;

      //if multiple, .val() returns an array. if not, it's a single value
      if (this.get('multiple')){
        let values = Ember.A(value);
        selection = this.get('content').filter(option => {
          let optionVal = Ember.get(option, this.get('optionValueKey')).toString();
          return values.contains(optionVal);
        });
      } else {
        selection = this.get('content').find(option => {
          return Ember.get(option, this.get('optionValueKey')).toString() === value;
        });
      }
      
      if (this.attrs.onchange){
        this.attrs.onchange(selection);
      }

    },
  }

});

controllers.application.js

import Ember from 'ember';

let _options = Ember.A([{
  id: 1, name: 'Option 1' }, {
  id: 2, name: 'Option 2' }, {
  id: 3, name: 'Option 3' }]);

export default Ember.Controller.extend({
  appName: 'TED-select',
  
  options: _options,
  selectedOption1: _options[0],
  selectedOption2: null,
  
  filteredOptions1: Ember.computed('options.[]', 'selectedOption2', function() {
    let selectedOption = this.get('selectedOption2.id');
    console.log('recalculating options for dropdown 1');

    return this.get('options').filter((option) => {
      if (selectedOption !== option.id) {
        console.log(`option ${option.id} is added`);
        return true;
      }
      
      return false;
    });
  }),
  
  filteredOptions2: Ember.computed('options.[]', 'selectedOption1', function() {
    let selectedOption = this.get('selectedOption1.id');
    console.log('recalculating options for dropdown 2');

    return this.get('options').filter((option) => {
      if (selectedOption !== option.id) {
        console.log(`option ${option.id} is added`);
        return true;
      }
      
      return false;
    });
  }),
  
  actions: {
    update1(selectedOption) {
      this.set('selectedOption1', selectedOption);
    },
    
    update2(selectedOption) {
      this.set('selectedOption2', selectedOption);
    }
  }
});

helpers.ted-select-is-equal.js

import Ember from 'ember';

export function tedSelectIsEqual([leftside, rightside]) {
  return leftside === rightside;
}

export default Ember.Helper.helper(tedSelectIsEqual);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{ted-select
  content=filteredOptions1
  optionValueKey="id"
  optionLabelKey="name"
  onchange=(action "update1")
  selected=selectedOption1
}}
<br>
{{ted-select
  content=filteredOptions2
  optionValueKey="id"
  optionLabelKey="name"
  onchange=(action "update2")
  selected=selectedOption2
}}

templates.components.ted-select.hbs

<select
  onchange={{action "onChange" value="target"}}
  class={{selectClassNames}}
  multiple={{multiple}}
  disabled={{disabled}}>
  {{#if prompt}}
  <option
    value=""
    selected={{ted-select-is-equal null selected}}
    class="Ted-select__prompt">
    {{prompt}}
  </option>
  {{/if}}
  {{#each sortedContent key="@index" as |option|}}
    <option
      value="{{get option optionValueKey}}"
      selected={{ted-select-is-equal option selected}}
      disabled={{get option optionDisabledKey}}>
      {{get option optionLabelKey}}
    </option>
  {{/each}}
</select>

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js",
    "ember-ted-select": "2.0.1"
  }
}