Cant trigger action from option select

Question

I have the following in my template:

<select>
  {{#each sortedManufacturers key="id" as |manufacturer|}}
    <optgroup label="{{manufacturer.name}}">
      {{#each manufacturer.cars key="id" as |car|}}
        <option {{action "carSelected" car}} value="{{car.model}}">{{car.model}}</option>
      {{/each}}
    </optgroup>
  {{/each}}
</select>

In the controller, I have:

actions: {
  carSelected(car) {
    console.log(car);
  }
}

When the option is selected from the select. It doesn't seem to trigger the carSelected action.

Any ideas why?

Answer 1

In Ember > 1.13 you can do the following:

<select onchange={{action "carSelected" value="target.value"}}>
   <!-- ... -->
</select>

With component JS:

export default Component.extend({
  actions: {
    carSelected(car) {
      // ..
    }
  }
});

Or you can use the unquoted “closure action” form:

<select onchange={{action carSelected value="target.value"}}>
   <!-- ... -->
</select>

With component JS:

export default Component.extend({
  carSelected(car) {
    // ..
  }
});

See the improved actions RFC for more on all this.