基于国家选择,需要填充国家和本市
问题描述:
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填充根据国家州和城市。 我的国家和州的领域是完美的,但我的城市没有任何物品。根据选定的国家填写州和城市的任何其他解决方案也会有所帮助。
答
<!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>
希望该解决方案帮助。
答
需要调用从选择的国家城市就像是如何从国家
<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>
不错的方法您的呼叫状态! –
@ Angular_10,谢谢 –
感谢您的建议,其良好的解决方案。我的问题解决 –