I am new to ember. Can anyone help me how to pass selected value as parameter to action handler 'onSelectEntityType'. I have tried the following and I am able to trigger the action.

<select class="form-control" id="entityType" {{action 'onSelectEntityType' on='change'}} >
    <option value="">Select</option>
    {{#each model as |entityType|}}
    <option value="{{entityType.id}}">{{entityType.entityTypeName}}</option>
    {{/each}}
</select>

Component js file

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
      onSelectEntityType(value) {
         console.log(value)
      }
    }
});

I am new to ember. Can anyone help me how to pass selected value as parameter to action handler 'onSelectEntityType'. I have tried the following and I am able to trigger the action.

<select class="form-control" id="entityType" {{action 'onSelectEntityType' on='change'}} >
    <option value="">Select</option>
    {{#each model as |entityType|}}
    <option value="{{entityType.id}}">{{entityType.entityTypeName}}</option>
    {{/each}}
</select>

Component js file

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
      onSelectEntityType(value) {
         console.log(value)
      }
    }
});

• javascript
• jquery
• ember.js
• ember-data

3 Answers 3

If you are using Ember 1.13.3 or later, you can do:

<select class="form-control" id="entityType" onchange={{action 'onSelectEntityType' value="target.value"}} >
  <option value="">Select</option>
  {{#each model as |entityType|}}
    <option value="{{entityType.id}}">{{entityType.entityTypeName}}</option>
  {{/each}}
</select>

For a better explanation than I could provide, see: http://balinterdi.com/2015/08/29/how-to-do-a-select-dropdown-in-ember-20.html

The way Ember deals with <select> has changed since 1.13. Using HTMLBars allows us to now directly add an action to the onchange property. As far as passing the value, you can do this by passing target.value to your action:

<select onchange={{action 'onSelectEntityType' value="target.value"}} >

Here's a sample twiddle

in ember octane

//component template  file
<select  {{on "change" this.setItemValue}}>
  {{#each @items as |item|}}
  <option value={{item}}>{{item}}</option>
  {{/each}}
</select>


 // component class file
 @action
  setItemValue(evt) {
    let itemValue = evt.target.value;
    evt.preventDefault();

  }