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

3
votes

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.

2
ember.jsember-data
Is It OK to use Jquery inside my controller action for this ?is that correct ember way of doing > - Prageeth godage
you can add a property to item called selected and in your option elements you can do this <option selected={{item.selected}}>. There are other ways to do it too, by using a helper, for example. I think using jquery can also work. Just check that the onchange action for the select is being triggered properly. - user2536065
Pragmatic means something very different (in a sensible and realistic way that is based on practical rather than theoretical considerations.) - Liam

2 Answers

1
votes

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.

7
votes

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>