如何根据其他下拉列表中的选择筛选下拉结果

How to filter down dropdown results based on selection from another dropdown?

本文关键字：筛选 选择 结果 何根 其他 下拉列表      更新时间：2023-09-26

我想按州和/或县筛选项目。我能够做到这一点，但我想补充的是，只显示与所选州相关的县的功能，如果没有选择州，则显示所有可用的县。我很确定我必须使用可观测，但想不出这样做的方法（开始学习可观测）。如果有更好的方法可以在不使用可观察属性的情况下实现这一点，请解释如何实现。

示例：

如果选择了佛罗里达州，则县下拉列表中只应包含迈阿密和奥兰多两个县。

这就是我现在拥有的：

JavaScript:

App = Ember.Application.create();
App.Router.map(function() {
  // put your routes here
});
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.A(
    [
      Ember.Object.create({ name: "John", county: "Miami", state: "Florida" }),
      Ember.Object.create({ name: "Sam", county: "Orlando", state: "Florida" }),
      Ember.Object.create({ name: "Tim", county: "Los Angeles", state: "California" }),
      Ember.Object.create({ name: "Liam", county: "San Francisco", state: "California" })
    ]);
  }
});
App.IndexController = Ember.ArrayController.extend({
  counties: function(){
    return this.get('model').getEach('county').uniq();
  }.property(),
  states: function(){
    return this.get('model').getEach('state').uniq();
  }.property(),

  filtered: function(){
    var country = this.get('country');
    var state = this.get('state');
    var model = this.get('model');
    if(country ){
      model = model.filterBy('country', country);
    }
    if(state){
      model = model.filterBy('state', state);
    }
    return model;    
  }.property('country', 'state')
});

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script>
</head>
<body>
  <script type="text/x-handlebars">
    {{outlet}}
  </script>
  <script type="text/x-handlebars" id="index">
  <h1>Non Filtered</h1>
  <ul>
  {{#each person in model}}
    <li>{{person.name}}({{person.county}}, {{person.state}})    
  </li>
  {{/each}}
  </ul>
  <h1>Filtered</h1>
  Counties: {{view "select" content=counties value=county prompt="Pick one..."}}
  States: {{view "select" prompt="Pick one..." content=states value=state}}
  <ul>
  {{#each person in filtered}}
    <li>{{person.name}}({{person.county}}, {{person.state}})    
  </li>
  {{/each}}
  </ul>
  </script>
</body>
</html>

JSBin

提前感谢！

您需要创建一个州到县的映射（告诉它哪个县映射到哪个州）。然后，您可以使用映射来筛选您在县下拉列表中显示的县。

stateToCountyMapping: [
  Ember.Object.create({ state: 'Florida',
                    counties: ['Miami', 'Orlando']}),
  Ember.Object.create({ state: 'California',
                    counties: ['Los Angeles', 'San Francisco']})
],
counties: function(){
  var counties = this.get('model').getEach('county').uniq();
  var state = this.get('state');
  if(state){
    var mapping = this.get('stateToCountyMapping').findBy('state', state);
    counties = counties.filter(function(county){
      return mapping.get('counties').contains(county);  
    })
  }
  return counties;
}.property('state')

工作演示

更新

如果您不想添加另一个属性进行映射，可以执行以下操作：

counties: function(){
  var counties = this.get('model').getEach('county').uniq();
  var state = this.get('state');
  if(state){
    counties = this.get('model').filter(function(record){
      return record.get('state') === state;  
    }).mapBy('county').uniq();
  }
  return counties;
}.property('model', 'state'),

基本上，根据所选的州过滤模型中的每个记录，然后只取县，然后确保它们是唯一的。

在这里工作演示

相关文章：