【发布时间】：2017-01-06 17:35:27
【问题描述】：
我目前正在尝试创建一种表单来从两个相关的下拉菜单中选择选项。如果您要更改上方的选项，则下方的数据也应根据上方的选项更改。
因此，我创建了一个小示例，您首先选择一个国家/地区。在此之后，您可以从这个国家/地区选择一个城市。
数据存储在本地数组中，稍后将通过服务获取。数据应该保存在对象数组中，因为这是服务提供数据的方式，因此不需要转换。
在这里你可以看到我非常简单的代码，由于我不知道如何创建这样一个“交流”表单，所以目前只是一个备用骨架。我希望你们能帮助我解决这种问题。
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>补充说明：
因此，如果您选择“德国”作为您的国家/地区，则在城市选择中只有选项“柏林”、“汉堡”和“慕尼黑”应该可用，因为属性 country。不会显示其他城市，例如巴黎或纽约。
编辑 如果默认选择一个国家/地区也很好，这样就不会出现空的下拉菜单。
【问题讨论】：
-
随心所欲地查看我的更新答案。
标签： javascript jquery html angularjs