根據另一個下拉列表中的選擇重新填充下拉菜單

Question

我有一個國家/地區下拉菜單，根據所選國家/地區的不同，我希望填充城市下拉列表。

有人可以提供一個關於如何根據另一個下拉選擇填充下拉列表的例子嗎？

Answer 1

我做了一個簡單的實現，使用Ember.Select。

給在jsfiddle

模板一看：

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>Select country and cities</h1> 
    {{outlet}} 
</script> 
<script type="text/x-handlebars" data-template-name="index">   
     {{view "select" 
      content=countries 
      optionLabelPath="content.name" 
      selection=selectedCountry 
      prompt="Select a country ..."}} 
     {{view "select" 
      content=currentCities 
      prompt="Select a city ..."}} 
</script> 

控制器：

App = Ember.Application.create({}); 

App.IndexController = Ember.ObjectController.extend({ 
    selectedCountry: null, 
    currentCities: null, 
    countries: [ 
     { 
      name: 'United States', 
      cities: ['Chicago', 'Miami'] 
     }, 
     { 
      name: 'Brazil', 
      cities: ['Sao Paulo', 'Rio de Janeiro'] 
     } 
    ],   
    selectedCountryChanged: function() { 
     this.set('currentCities', this.get('selectedCountry.cities'));  
    }.observes('selectedCountry') 
}); 

Answer 2

在你的控制器，你可以做這樣的事情：

indications1a: Ember.A(), 
indications1b: Ember.A(), 

loadIndications: function (name, parentId) { 
    var self = this; 
    $.connection.ccprIndicationsToRevalidation.server.getAllByParentId(parentId) 
     .done(function (result) { 
      self.set("indications%@".fmt(name), result); 
      self.checkIfChildInChildren(name); 
     }); 
}, 

loadChildIndications: function (name1, name2) { 
    var parent = this.get('content.indication%@'.fmt(name1)), 
     parents = this.get('indications%@'.fmt(name1)), 
     childs = this.get('indications%@'.fmt(name2)); 
    childs.clear(); 
    if (!Em.isEmpty(parent) && !Ember.isEmpty(parents)) { 
     var indication = null; 
     parents.every(function (item) { 
      if (Em.isEqual(Ember.get(item, 'id'), parent)) { 
       indication = item; 
       return false; 
      } 
      return true; 
     }); 

     if (!Ember.isEmpty(Ember.get(indication, 'hasChildren'))) { 
      this.loadIndications(name2, indication.id); 
     } else { 
      this.set('content.indication%@'.fmt(name2), 0); 
     } 
    } 
}, 

checkIfChildInChildren: function (name) { 
    var child = this.get('content.indication%@'.fmt(name)), 
     childs = this.get('indications%@'.fmt(name)); 
    var found = false; 
    childs.every(function (item) { 
     if (Em.isEqual(Em.get(item, 'id'), child)) { 
      found = true; 
      return false; 
     } 
     return true; 
    }); 
    if (!found) { 
     this.set('content.indication%@'.fmt(name), 0); 
    } 
}, 

indicationToRevalidation1aChanged: function() { 
    this.loadChildIndications('1a', '1b'); 
}.observes('content.indication1a', 'indications1a.length'), 

hasNoIndications1b: function() { 
    return this.get('indications1b.length') === 0; 
}.property('indications1b.length'), 

在路線的setupController

controller.get('indications1a').clear(); 
controller.get('indications1b').clear(); 

controller.loadIndications('1a', null); 

車把：

{{view Bootstrap.Forms.Select 
    label=false 
    contentBinding="controller.indications1a" 
    optionLabelPath="content.description" 
    optionValuePath="content.id" 
    valueBinding="controller.content.indication1a"}} 

    {{view Bootstrap.Forms.Select 
    label=false 
    contentBinding="controller.indications1b" 
    optionLabelPath="content.description" 
    optionValuePath="content.id" 
    disabledBinding="controller.hasNoIndications1b" 
    valueBinding="controller.content.indication1b"}}