Javascript 创建两个动态下拉菜单_Javascript_Jquery_Html_Angularjs

Javascript 创建两个动态下拉菜单

javascript jquery html angularjs

Javascript 创建两个动态下拉菜单,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我目前正在尝试创建一种表单，从两个相关的下拉菜单中选择选项。如果要更改上一个选项，则下一个选项上的数据也应根据上一个选项而更改。因此，我创建了一个小示例，首先选择一个国家。在此之后，您可以从该国家/地区选择一个城市。数据存储在本地数组中，稍后将通过服务获取。数据应该保存在对象数组中，因为这是服务提供数据的方式，所以不需要转换在这里你可以看到我非常简单的代码，这只是目前的一个备用框架，因为我不知道如何创建这样一个“通信”表单。我希望你们能帮我解决这类问题 HTML var-app=angu

我目前正在尝试创建一种表单，从两个相关的下拉菜单中选择选项。如果要更改上一个选项，则下一个选项上的数据也应根据上一个选项而更改。
因此，我创建了一个小示例，首先选择一个国家。在此之后，您可以从该国家/地区选择一个城市。
数据存储在本地数组中，稍后将通过服务获取。数据应该保存在对象数组中，因为这是服务提供数据的方式，所以不需要转换

在这里你可以看到我非常简单的代码，这只是目前的一个备用框架，因为我不知道如何创建这样一个“通信”表单。我希望你们能帮我解决这类问题

HTML

var-app=angular.module（'AngularApp'，[]）；
应用程序控制器（“MainCtrl”，函数（）{
var vm=这个；
vm.message=“选择您的目的地”；
vm.data=[
{城市：'柏林'，国家：'德国'}，
{城市：'汉堡'，国家：'德国'}，
{城市：'慕尼黑'，国家：'德国'}，
{城市：'纽约'，国家：'美国'}，
{城市：'Whashington DC'，国家：'USA'}，
{城市：'巴黎'，国家：'法国'}
];
});

{{Main.message}
国家：

城市：
您可以使用以下HTML：
Country:
<select name="country" ng-model="country">
  <option ng-repeat="option in Main.data" value="{{option.country}}">{{option.country}}</option>
</select>

City:
<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>

国家：
{{option.country}
城市：
{{option.city}
您可以使用以下HTML：
Country:
<select name="country" ng-model="country">
  <option ng-repeat="option in Main.data" value="{{option.country}}">{{option.country}}</option>
</select>

City:
<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>

国家：
{{option.country}
城市：
{{option.city}
HTML代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Login</title>
  </head>
  <body ng-app="AngularApp">

  <div ng-controller="MainCtrl as Main">
    <h1>{{Main.message}}</h1>
    country:
    <select name="country" ng-model="cont" ng-init="cont = cont || 'Germany'">   
        <option ng-selected="$first" ng-repeat="con in Main.data | unique:'country'">{{con.country}}</option> 
    </select>
    <br/>
    city:
    <select name="city" ng-model="cit">
        <option ng-selected="$first" ng-repeat="ct in Main.data | filter:{country: cont}">{{ct.city}}</option>
    </select>
  </div>



  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js" type="text/javascript"></script>
  <script src="app.js"></script>
  </body>
</html>

HTML代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Login</title>
  </head>
  <body ng-app="AngularApp">

  <div ng-controller="MainCtrl as Main">
    <h1>{{Main.message}}</h1>
    country:
    <select name="country" ng-model="cont" ng-init="cont = cont || 'Germany'">   
        <option ng-selected="$first" ng-repeat="con in Main.data | unique:'country'">{{con.country}}</option> 
    </select>
    <br/>
    city:
    <select name="city" ng-model="cit">
        <option ng-selected="$first" ng-repeat="ct in Main.data | filter:{country: cont}">{{ct.city}}</option>
    </select>
  </div>



  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js" type="text/javascript"></script>
  <script src="app.js"></script>
  </body>
</html>

您可以使用“角度过滤器”
模块显示唯一选项
<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>


{{Main.message}
国家
{{option.country}
城市
{{option.city}


提交
您可以使用'angular-filter'
模块显示独特的选项
<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>


{{Main.message}
国家
{{option.country}
城市
{{option.city}


提交

var-app=angular.module（'AngularApp'，['angular.filter']）；
应用程序控制器（“MainCtrl”，函数（）{
var vm=这个；
vm.message=“选择您的目的地”；
vm.data=[
{城市：'柏林'，国家：'德国'}，
{城市：'汉堡'，国家：'德国'}，
{城市：'慕尼黑'，国家：'德国'}，
{城市：'纽约'，国家：'美国'}，
{城市：'Whashington DC'，国家：'USA'}，
{城市：'巴黎'，国家：'法国'}
];
});

{{Main.message}
国家
选一个
{{option.country}
城市
选一个
{{option.city}


提交

var-app=angular.module（'AngularApp'，['angular.filter']）；
应用程序控制器（“MainCtrl”，函数（）{
var vm=这个；
vm.message=“选择您的目的地”；
vm.data=[
{城市：'柏林'，国家：'德国'}，
{城市：'汉堡'，国家：'德国'}，
{城市：'慕尼黑'，国家：'德国'}，
{城市：'纽约'，国家：'美国'}，
{城市：'Whashington DC'，国家：'USA'}，
{城市：'巴黎'，国家：'法国'}
];
});

{{Main.message}
国家
选一个
{{option.country}
城市
选一个
{{option.city}


提交
感谢您的回答，但“德国”在选择中出现了3次。它应该只显示一次，以避免不必要的长列表。感谢您的回答，但“德国”在选择中显示了3次。它应该只显示一次，以防止不必要的长列表。好的。保留它。有没有一种方法可以设置每个默认值的国家/地区，这样你的性感表单在加载时就不会是空的；-）？您的意思是为每个国家/地区设置默认城市？您可以在您的国家/地区选项上设置ng init
，以指向默认城市。尝试在此处查找信息：。我想将列表中的第一个国家/地区和该国家/地区的第一个城市设置为默认值。由于数据的变化，无法将ng init
-值设置为静态字符串。如何将第一个国家和一个合适的城市设置为默认值？很好。保留它。有没有一种方法可以设置每个默认值的国家/地区，这样你的性感表单在加载时就不会是空的；-）？您的意思是为每个国家/地区设置默认城市？您可以在您的国家/地区选项上设置ng init
，以指向默认城市。尝试在此处查找信息：。我想将列表中的第一个国家/地区和该国家/地区的第一个城市设置为默认值。由于数据的变化，无法将ng init
-值设置为静态字符串。如何将第一个国家和一个合适的城市设置为默认值？很好。留着，好的。保留它。根据需要查看我的更新答案。根据需要查看我的更新答案。