Question

HTML：

<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="!citiessource || !statessource" ng-model="city"><option value=''>
  Select</option>
<option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option>
 </select>

JS：

$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;
            };

我已经在JSON $ sope.countries上面写了根据国家/地区填充州和城市。我的国家和州的领域非常完美，但我的城市里面没有任何项目。基于所选国家填写州和城市的任何其他解决方案也将有所作为。

Answer 1

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-controller="testController">



  <label for="country">Country *</label>
  <select id="country" ng-model="countrySrc" 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="!countrySrc" ng-model="stateSrc" ng-options="state for (state,city) in countrySrc" ng-change="GetSelectedState()">
    <option value=''>Select</option>
  </select>
  <label for="city">City *</label>
  <select id="city" ng-disabled="!countrySrc || !stateSrc" ng-model="city" ng-options="city for city in stateSrc">
    <option value=''>Select</option>

  </select>

  <script>
    angular
      .module('myApp', [])
      .run(function($rootScope) {
        $rootScope.title = 'myTest Page';
      })
      .controller('testController', ['$scope',
        function($scope) {


          $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 = $scope.countrySrc;
          };
          $scope.GetSelectedState = function() {
            $scope.strState = $scope.stateSrc;
          };
        }
      ])
  </script>
</body>

</html>

希望这个解决方案有所帮助。

Answer 2

您需要从所选州调用城市，就像您的国家/地区的通话状态一样

<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"
         ng-change="GetSelectedState()"><option value=''>Select</option>
 </select>
  </body>

solved plunker

根据所选国家，需要填写州和城市

2 个答案: