自动填充文本框,包含两个下拉列表

时间:2015-05-08 06:18:28

标签: javascript html angularjs

我有一个国家/地区下拉列表,另一个城市下拉列表和地方自动填充文本框。

当我在第一个下拉列表中选择国家/地区时,它会在第二个下拉列表中显示该特定国家/地区的城市列表。

接下来,我想在自动填充文本框中显示所选城市下的地点列表。

我有一个本地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"

     }]
 }

0 个答案:

没有答案