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

问题

This is my sample drop down

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

from the relevant template action I wanted to set this selected item dynamically.

As an example it default selected by "Select" and then based on some button click on that page and need to set my selected option to other selected option to be selected. I am not using any plugin and I can't do it here.

回答1:

You can use ember-truth-helpers' eq helper to set which option is selected. I believe I have coded what you are asking at this twiddle. See my-component.hbs about how I used eq helper to set selected attributes of each option.

By the way I suggest using ember-power-select for select box instead of trying to write your own select with options.

回答2:

I used mut helper to set directly to selectedItemId property. so onchange it will update it automaticaly. also used ember-truth-helper for eq helper to decide particular item is selected or not.

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

来源：https://stackoverflow.com/questions/43090234/how-can-i-programatically-select-a-drop-down-option-using-ember

标签

ember.js

ember-data