Ember form select

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  fruits: null,
  selectedId: null,
  
  init() {
    this._super(...arguments);
    this.fruits = [
      { id: 1, name: 'apple' },
      { id: 2, name: 'orange' },
    ];
  },
  
  didRender() {
  	console.log('didRender');
  },
  
  actions: {
    setSelection(fruit) {
      let select = document.getElementById('bob');
      console.log(select, fruit, select.options);
      this.$('#bob').value = e.target.value;
      this.set('selectedId', Number(e.target.value));
    },
  }
});

templates.application.hbs

<MyComponent/>

templates.components.my-component.hbs

<form
  onsubmit={{action "handleSubmit"}}
  onreset={{action "handleReset"}}>
  <label>
    Fruit
    <select onchange={{action "handleChange"}}>
      <option disabled={{selectedId}}>Select one</option>
      {{#each fruits as |fruit|}}
        <option
          value={{fruit.id}} 
          selected={{eq fruit.id selectedId}}>
          {{fruit.name}} (ID: {{fruit.id}})
         </option>
      {{/each}}
    </select>
  </label>
  
  <button type="reset">Reset</button>
  <button type="submit">Submit</button>
  
  {{#if selectedId}}
    <div>
      <output>
        Selected ID: {{selectedId}}
      </output>
    </div>
  {{/if}}
</form>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-truth-helpers": "2.0.0"
  }
}