如何使用 Ember 以编程方式 select 下拉选项？

Question

这是我的示例下拉列表

<select name="newType" class="parts-select full-width-combo" onchange={{action "loadFilter" value="target.value" }}>
            <option value="" selected  hidden >Select </option>
            {{#each model as |item|}}
                <option value="{{item.id}}">{{item.description}}</option>
            {{/each}}
 </select>

从相关的模板操作我想动态设置这个选定的项目。

作为示例，它默认由 "Select" 选择，然后根据某个按钮单击该页面，需要将我选择的选项设置为要选择的其他选定选项。我没有使用任何插件，我不能在这里做。

Answer 1

我使用 mut helper to set directly to selectedItemId property. so onchange it will update it automaticaly. also used ember-truth-helper 的 eq 助手来决定是否选择特定项目。

<select name="newType" class="parts-select full-width-combo" onchange={{action (mut selectedItemId) value="target.value" }}>
            <option value="" selected  hidden >Select </option>
            {{#each model as |item|}}
                <option value="{{item.id}}" selected={{if (eq item.id selectedItemId) 'true'}}>{{item.description}}</option>
            {{/each}}
 </select>

Answer 2

您可以使用 ember-truth-helpers' eq helper to set which option is selected. I believe I have coded what you are asking at this twiddle。请参阅 my-component.hbs，了解我如何使用 eq 助手来设置每个选项的 selected 属性。

顺便说一下，我建议对 select 框使用 ember-power-select 而不是尝试编写自己的 select 选项。

如何使用 Ember 以编程方式 select 下拉选项？

How can I programatically select a drop down option using Ember?

ember.js

ember-data