2017-03-29 22 views
2

這是我的樣品從相關模板作用,我想動態設置此選擇的項目下拉燼JS務實設置選擇的選項

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

因爲它默認的「選擇」,然後根據該網頁上的一些按鈕,點擊需要我選擇的選項被選中設置爲其他選定的選項中選擇一個例子。 我沒有使用任何插件,我不能在這裏做。

+0

是否可以在我的控制器內部使用jquery動作?是否正確使用了ember的方式> – Prageeth

+0

您可以將屬性添加到名爲selected的項中,並且在您的選項元素中可以執行此操作

回答

1

您可以使用ember-truth-helpers'eq助手設置選擇哪個選項。我相信我已在this twiddle上編寫了您要求的內容。見my-component.hbs我如何使用eq助手設置每個選項的selected屬性。

通過我建議使用ember-power-select的選擇框,而不是試圖編寫自己與選項中進行選擇的方式。

3

我以前mut helper直接設置爲selectedItemId屬性。所以換它會自動更新它。也用於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>