如何使用 Ember 以编程方式选择下拉选项？答案

【问题标题】：How can I programatically select a drop down option using Ember?如何使用 Ember 以编程方式选择下拉选项？
【发布时间】：2017-03-29 09:56:57
【问题描述】：

这是我的示例下拉菜单

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

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

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

【问题讨论】：

可以在我的控制器操作中使用 Jquery 吗？这是正确的 ember 方式吗>
您可以向名为 selected 的项目添加一个属性，并在您的选项元素中执行此操作<option selected={{item.selected}}>。还有其他方法可以做到这一点，例如，使用助手。我认为使用 jquery 也可以。只需检查 select 的 onchange 操作是否被正确触发。
务实意味着非常不同的东西（以一种基于实际而非理论考虑的明智和现实的方式。）

标签： ember.js ember-data

【解决方案1】：

我使用mut helper 直接设置为selectedItemId 属性。所以 onchange 它将自动更新它。还使用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>

【讨论】：

【解决方案2】：

您可以使用ember-truth-helpers'eq 助手来设置选择哪个选项。我相信我已经对您在this twiddle 提出的问题进行了编码。请参阅my-component.hbs，了解我如何使用eq 助手设置每个选项的selected 属性。

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

【讨论】：