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>

控制器：

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