燃えさしjsの実用的設定選択オプション

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

。私はあなたがthis twiddleに尋ねているものをコード化していると信じています。 eqヘルパーを使用して各オプションの属性をselectedに設定する方法については、my-component.hbsを参照してください。

ところで、私は選択肢を使って独自の選択を書くのではなく、選択ボックスにember-power-selectを使用することをお勧めします。

Answer 2

mut helperを使用して直接selectedItemIdプロパティに設定しました。それはonchangeので、それはautomaticaly更新されます。特定の項目を決定するeqヘルパー用にember-truth-helperも使用されています。あなたが選択されているオプションを設定するember-truth-helpers「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>