州和城市填充下拉菜单答案

【问题标题】：State and city populate Dropdowns州和城市填充下拉菜单
【发布时间】：2018-03-16 14:26:58
【问题描述】：

这里有国家、州和城市过滤器下拉列表。我不要国家。我只想要州和城市的下拉菜单。如果我选择州，它应该填充适当的城市。

仅在我想要的印度州和城市。谁能帮我做这件事。

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.countries = {

                'USA': {
                    'Alabama': ['Montgomery', 'Birmingham'],
                    'California': ['Sacramento', 'Fremont'],
                    'Illinois': ['Springfield', 'Chicago']
                },
               'India': {
                    'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                    'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                    'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                },
                'Australia': {
                    'New South Wales': ['Sydney'],
                    'Victoria': ['Melbourne']
                }
            };

 $scope.GetSelectedCountry = function () {
                $scope.strCountry = document.getElementById("country").value;
            };
            $scope.GetSelectedState = function () {
                $scope.strState = document.getElementById("state").value;
            };
            $scope.GetSelectedcity = function () {
                $scope.strCity = document.getElementById("city").value;
            };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <label for="country">Country *</label>
 <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
                ng-change="GetSelectedCountry()">
 <option value=''>Select</option>
</select>    
 <label for="state">State *</label>
<select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource"
         ng-change="GetSelectedState()"><option value=''>Select</option>
 </select>
  <label for="city">City *</label>
 <select id="city" ng-disabled="!model.state" ng-model="model.city" ng-options="city for city  in model.state"
         ><option value=''>Select</option>
 </select>
  </body>

</html>

任何人都可以请更新此代码。

【问题讨论】：

不能把国家下拉的代码去掉吗？

标签： javascript html angularjs

【解决方案1】：

在定义$scope.countries 类似$scope.statessource = $scope.countries.India; 之后，您可以在控制器中将默认值设置为$scope.statessource。如果您不希望用户更改国家/地区，可以删除国家/地区下拉菜单。

【讨论】：