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

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

Answer 2

In your controller you can do something like this:

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'),

in the setupController of the route

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

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

the handlebars:

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