我有一个国家/地区下拉列表,另一个城市下拉列表和地方自动填充文本框。
当我在第一个下拉列表中选择国家/地区时,它会在第二个下拉列表中显示该特定国家/地区的城市列表。
接下来,我想在自动填充文本框中显示所选城市下的地点列表。
我有一个本地JSON文件,html页面和JavaScript文件。 HTML代码如下:
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="js/json4update.js">
< script type = "text/javascript"
src = "js/textauto.js" >
</script>
</head>
<body>
<div ng-controller="MyController">
<select ng-model="Countryselected" ng-options=" coun.country for coun in country" ng-change="getCity()">
<option value="">Select</option>
</select>
<select ng-model="cityselect" ng-options=" c.name for c in Citydetails " ng-disabled="!Countryselected">
<option value="">Select</option>
</select>
<input id="tags" ng-model="placeselected" ng-keyup="complete()" placeholder="Type place name" ng-disabled="!cityselect" />
</div>
</body>
</html>
这是我的.js文件,这是我猜的问题。我无法在所需的地方使用JS功能。
var app = angular.module('myApp', []);
app.controller('MyController', function ($scope, $http) {
$http.get("file2update.json").success(function (data) {
$scope.country = data.records;
$scope.getCity = function () {
$scope.Citydetails = $scope.Countryselected.cities;
$scope.places = $scope.cityselect.place;
}
});
$scope.complete = function ()
{
$("#tags").autocomplete({
source: $scope.placeselected
});
}
});
这是我的JSON文件。
{
"records": [{
"cities": [{
"name": "patna",
"place": [
"p1",
"p2",
"p3"]
}, {
"name": "delhi",
"place": [
"d1",
"d2"]
}],
"country": "india"
}, {
"cities": [{
"name": "Australia1",
"place": [
"A1",
"A2",
"A3"]
}, {
"name": "Australia2",
"place": [
"a11",
"a22",
"a33"]
}],
"country": "Australia"
}]
}