根据另一个下拉列表中的选择重新填充下拉菜单

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