ember js get form select after submit - ember.js

Question

Tried to search some example with form select list but seems they always take value by using onchange function
http://balinterdi.com/2015/08/29/how-to-do-a-select-dropdown-in-ember-20.html
However in my project I want something like this:
<form {{action "createBook" on="submit"}}>
<p>{{input type='text' id='title' value=title}}</p>
<p> <select name="lang" id="lang">
<option value="">--Choose--</option>
{{#each model.language as |lang|}}
<option value="{{lang.url}}">{{lang.title}}</option>
{{/each}}
</select>
</p>
</form>
In my controller I have:
actions:{
createBook() {
var title = this.get('title'); //This line works fine
var lang = this.get('lang'); //This value from select isnt working at all
//do stuffs ..
},
}
What can i do so that i can get the value from select in createBook() actions?

Answer 1

You can pass the option value in select onchange and set value in from action handler,
<select onchange={{action "selectOption" value="target.value"}}>
<option value="">--Choose--</option>
{{#each model.language as |lang|}}
<option value="{{lang.url}}">{{lang.title}}</option>
{{/each}}
{{/each}}
Actions,
actions: {
selectOption: function(option) {
this.set("lang", option);
}
}

Answer 2

you can use like this
<select {{action 'change' on='change'}}>
{{#each content as |item|}}
<option value="{{item.id}}">
{{item.name}}
</option>
{{/each}}
in onchange method and set the property of lang of selected item
actions: {
createBook() {
var title = this.get('title'); //This line works fine
var lang = this.get('lang');
console.log(lang, title);
},
change() {
const selectedEl = this.$('select')[0];
const selectedIndex = selectedEl.selectedIndex;
const selectedValue = this.get('content')[selectedIndex];
this.set('lang', selectedValue.id)
}
}
Please check hereTwiddle