Re-populating a drop-down depending on the selection on another drop-down

Question

I have a countries dropdown, and depending on the selected country, I would like to populate a cities drop-down.

Could somebody provide an example on how to populate a drop-down depending on another drop-down selection?

Answer 1

I have made a simple implementation, using Ember.Select.

Give a look in that jsfiddle

Templates:

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