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>

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

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

Answer 1

我使用mut helper直接设置为selectedItemId属性。所以onchange它会自动更新它。还使用ember-truth-helper为eq helper决定是否选择特定项目。

<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＆＃39; eq帮助程序，用于设置选择的选项。我相信我已在this twiddle编码了你所要求的内容。有关我如何使用my-component.hbs帮助程序设置每个选项的eq属性，请参阅selected。

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

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

2 个答案: