创建两个动态下拉菜单

问题描述

我目前正在尝试创建一种表单来从两个从属下拉菜单中选择选项。如果您要更改上面的选项，下面的选项上的数据也应根据上面的选项更改。

因此，我创建了一个小例子，您首先选择一个国家。之后，您可以从这个国家选择一个城市。

数据存储在本地数组中，稍后将通过服务提取。数据应该保存在对象数组中，因为这是数据由服务提供的方式，所以不需要转换。

在这里你可以看到我非常简单的代码，这只是一个备用的骨架，因为我不知道如何创建这样一个'沟通'形成。我希望你们可以帮我解决这类问题。
$ b

HTML

 < body ng-app =AngularApp> 
< div ng-controller =MainCtrl as Main> 
< h1> {{Main.message}}< / h1> 
国家：
 < option>< / option> 
< / select> 
< br />城市：
< select name =city> 
< option>< / option> 
< / select> 
< / div> 
< script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js>< / script> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script> 
< / body> 
  

App.js

  var app = angular.module（'AngularApp'，[]）; 
 
 app.controller（MainCtrl，function（）{
 var vm = this; 
 
 vm.message =选择您的目的地; 
 vm.data = [
 {city：'Berlin'，country：'Germany'}，
 {city：'Hamburg'，country：'Germany'}，
 {city：'慕尼黑'，国家：'德国'}，
 {city：'New York'，country：'USA'}，
 {city：'Whashington DC'，country：'USA'}，
 {city：'Paris'，country：'France'} 
]; 
}）; 
  

  var app = angular.module（'AngularApp'，[]）; app.controller（MainCtrl，function（）{var vm = this; vm.message =选择你的目的地; vm.data = {city：'Berlin'，country：'Germany'}，{city：'Hamburg'，country：'Germany'}，{city：'Munich'，country：'Germany'}，{city：'New York' ，国家：'USA'}，{城市：'Whashington DC'，国家：'USA'}，{city：'Paris'，country：'France'}};}）;  

< body ng-app =AngularApp> < div ng-controller =MainCtrl as Main> < H1> {{Main.message}}< / H1>国家：< select name =country> <选项>< /选项> < /选择> < br />城市：< select name =city> <选项>< /选项> < /选择> < / DIV> < script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js>< / script> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script>< / body>

其他说明：

因此，如果您选择'德国'作为您的国家，在城市选择中，只有选项'Berlin'，'Hamburg'和'Munich'应该可用，因为国家。其他城市如巴黎或纽约不会显示。

---

编辑
如果有一个国家/地区选择了默认值，那么它也会很好，这样就不会出现空的下拉菜单。

解决方案

您可以使用'angular-filter'模块显示唯一选项。

 < select name =countryng-model =country> 
 value ={{option.country}}> {{option.country}}< Main.data中的
< option ng-repeat = /选项> 
< / select> 
 
 < option ng-repeat =Main.data中的选项ng-if =option.country == country
 value ={{option.city}}> {{option 。市}}< /选项> 
< / select> 
  

示例

我添加了一些Bootstrap类以形式来清理其演示文稿。 ：）

var app = angular.module（'AngularApp'，['' '）; app.controller（MainCtrl，function（）{var vm = this; vm.message =选择您的目的地; vm.data = [{city：'Berlin'，country：'Germany '}，{city：'Hamburg'，country：'Germany'}，{city：'Munich'，country：'Germany'}，{city：'New York'，country：'USA'}，{city：' Whashington DC'，country：'USA'}，{city：'Paris'，country：'France'}];}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js> ;< / script>< script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js >< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< link href =https：//maxcdn.bootstrapcdn .com / bootstrap / 3.3.7 / css / bootstrap.min.cssrel =stylesheet/>< body ng-app =AngularApp> < div ng-controller =MainCtrl as Mainclass =container> < H1> {{Main.message}}< / H1> <形式> < div class =form-group> <标签>国家< /标签> < select name =countryng-model =countryclass =form-control> Main.data中的< option ng-repeat =选项| unique：'country'value ={{option.country}}> {{option.country}}< / option> < /选择> < / DIV> < div class =form-group> <标签>城市< /标签> < select name =cityng-model =cityclass =form-control> &n;选项ng-repeat =在Main.data中的选项ng-if =option.country == countryvalue ={{option.city}}> {{option.city}}< / option> ; < /选择> < / DIV> < br /> < button type =submitclass =btn btn-default>提交< / button> < /形式> < / body>  

I´m currently trying to create a kind of form to choose options from two dependent drop-down menus. If you are changing the option on the upper one, the data on the lower one should also change depending on the upper one.
Therefore I created a small example where you first select a country. After this you can select a city from this country.
The data is stored in a local array and will be later fetched via a service. The data should be saved in an object array because that's how data is provided by the service, so no conversion will be necessary.

Here you can see my pretty simple code, which is just a spare skeleton at the moment due to the fact that I have no clue how to create such a 'communicating' form. I hope you guys can help me to solve this kind of problem.

HTML

<body ng-app="AngularApp">
  <div ng-controller="MainCtrl as Main">
    <h1>{{Main.message}}</h1>
    country:
    <select name="country">
      <option></option>
    </select>
    <br/>city:
    <select name="city">
      <option></option>
    </select>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>

App.js

var app = angular.module('AngularApp', []);

app.controller("MainCtrl", function() {
  var vm = this;

  vm.message = "Select your destination";
  vm.data = [
    { city: 'Berlin',         country: 'Germany' },
    { city: 'Hamburg',        country: 'Germany' },
    { city: 'Munich',         country: 'Germany' },
    { city: 'New York',       country: 'USA' },
    { city: 'Whashington DC', country: 'USA' },
    { city: 'Paris',          country: 'France' }
  ];
});

var app = angular.module('AngularApp', []);

app.controller("MainCtrl", function() {
  var vm = this;

  vm.message = "Select your destination";
  vm.data = [
    { city: 'Berlin',         country: 'Germany' },
    { city: 'Hamburg',        country: 'Germany' },
    { city: 'Munich',         country: 'Germany' },
    { city: 'New York',       country: 'USA' },
    { city: 'Whashington DC', country: 'USA' },
    { city: 'Paris',          country: 'France' }
  ];
});

<body ng-app="AngularApp">
  <div ng-controller="MainCtrl as Main">
    <h1>{{Main.message}}</h1>
    country:
    <select name="country">
      <option></option>
    </select>
    <br/>city:
    <select name="city">
      <option></option>
    </select>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>

---

Additional explanation:
So if you choose 'Germany' as your country, in the city selection only the options 'Berlin', 'Hamburg' and 'Munich' should be available because of the attribute country. The other cities like Paris or New York won´t be displayed.

---

EDITIt also would be nice if there is one country selected per default, so that no empty drop-down will show up.

解决方案

You can use the 'angular-filter' module to show unique options.

<select name="country" ng-model="country">
    <option ng-repeat="option in Main.data | unique: 'country'"
            value="{{option.country}}">{{option.country}}</option>
</select>

<select name="city" ng-model="city">
    <option ng-repeat="option in Main.data" ng-if="option.country == country"
            value="{{option.city}}">{{option.city}}</option>
</select>

Example

I added some Bootstrap classes to the form to clean up its presentation. :)

var app = angular.module('AngularApp', ['angular.filter']);

app.controller("MainCtrl", function() {
  var vm = this;

  vm.message = "Select Your Destination";
  vm.data = [
    { city: 'Berlin',         country: 'Germany' },
    { city: 'Hamburg',        country: 'Germany' },
    { city: 'Munich',         country: 'Germany' },
    { city: 'New York',       country: 'USA' },
    { city: 'Whashington DC', country: 'USA' },
    { city: 'Paris',          country: 'France' }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body ng-app="AngularApp">
  <div ng-controller="MainCtrl as Main" class="container">
    <h1>{{Main.message}}</h1>
    <form>
      <div class="form-group">
        <label>Country</label>
        <select name="country" ng-model="country" class="form-control">
          <option ng-repeat="option in Main.data | unique: 'country'" value="{{option.country}}">{{option.country}}</option>
        </select>
      </div>
      <div class="form-group">
        <label>City</label>
        <select name="city" ng-model="city" class="form-control">
          <option ng-repeat="option in Main.data" ng-if="option.country == country" value="{{option.city}}">{{option.city}}</option>
        </select>
      </div>
      <br />
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</body>

这篇关于创建两个动态下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！