Question

尝试使用表单选择列表搜索一些示例，但似乎它们总是通过使用onchange函数来获取值 http://balinterdi.com/2015/08/29/how-to-do-a-select-dropdown-in-ember-20.html

但是在我的项目中我想要这样的东西：

<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>

在我的控制器中我有：

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 ..
   },
}

我能做什么才能从createBook（）动作中的select中获取值？

Answer 1

你可以像这样使用

<select {{action 'change' on='change'}}>
  {{#each content as |item|}}
    <option value="{{item.id}}">
    {{item.name}}
  </option>
{{/each}}

在onchange方法中并设置所选项目的lang属性

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)
  }
}

请点击此处Twiddle

Answer 2

您可以在select onchange中传递选项值，并从操作处理程序

中设置值

<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: {
    selectOption: function(option) { 
        this.set("lang", option);
    }
}

提交后，ember js获取表单选择

2 个答案: