基于国家选择，需要填充国家和本市

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填充根据国家州和城市。我的国家和州的领域是完美的，但我的城市没有任何物品。根据选定的国家填写州和城市的任何其他解决方案也会有所帮助。

来源

2016-11-07 Nicoleta Wilskon

<!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>

希望该解决方案帮助。

来源

2016-11-07 12:40:50

不错的方法您的呼叫状态！ –

@ Angular_10，谢谢 –

感谢您的建议，其良好的解决方案。我的问题解决 –

需要调用从选择的国家城市就像是如何从国家

<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

来源

2016-11-07 12:52:52

基于国家选择，需要填充国家和本市

回答

相关问题