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

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')
});