javascript - 根据另一个下拉菜单的选择重新填充下拉菜单

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>

Controller :

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