Javascript - 如何创建一个国家和城市的级联下拉列表，并在 AngularJS 中选择一个国家作为默认国家？

Question

我想创建一个国家/城市级联下拉列表，当选择国家/地区时，该特定国家/地区的城市将显示在第二个下拉列表中。

一个国家将在第一个或国家下拉列表中作为默认国家，让美国成为默认国家。

同样，一个州将成为第二个下拉列表的默认状态 - 例如美国纽约、英国伦敦、俄罗斯莫斯科、西类牙马德里和印度德里。

以下是我的 JSON 数据。

[{
            "id": "1", "name":"USA",
                "cities": [{
                "id": "1",
                    "name": "New York"
            }, {
                "id": "2",
                    "name": "Los Angeles"
            }]
        }, {
            "id": "2", "name":"UK",
                "cities": [{
                "id": "3",
                    "name": "London"
            }, {
                "id": "4",
                    "name": "Glasgow"
            }]
        },
        {
            "id": "3", "name":"Russia",
                "cities": [{
                "id": "5",
                    "name": "Moscow"
            }, {
                "id": "6",
                    "name": "St. Petersburg"
            }]
        },
        {
            "id": "4", "name":"Spain",
                "cities": [{
                "id": "7",
                    "name": "Madrid"
            }, {
                "id": "8",
                    "name": "Barcelona"
            }]
        },
        {
            "id": "5", "name":"India",
                "cities": [{
                "id": "9",
                    "name": "Delhi"
            }, {
                "id": "10",
                    "name": "Mumbai"
            }]
        }]

我试过这样做，但未能保留默认国家/地区以及每个国家/地区的默认城市。

我正在使用 Angular v1 和 vanilla JS(没有 JQuery)。我不想使用 angular.forEach

我无法在第一个下拉菜单中实现默认国家/地区，在第二个下拉菜单中实现该特定国家/地区的默认城市

Answer 1

这是一种使用 data-ng-options (ng-options) 实现此目的的方法:

希望这对您有所帮助。

(function() {
  var app = angular.module("app", []);
  app.controller("Controller", ["$scope", function($scope) {
    $scope.title = "Demo";
    $scope.data = [{
      "id": "1",
      "name": "USA",
      "cities": [{
        "id": "1",
        "name": "New York"
      }, {
        "id": "2",
        "name": "Los Angeles"
      }]
    }, {
      "id": "2",
      "name": "UK",
      "cities": [{
        "id": "3",
        "name": "London"
      }, {
        "id": "4",
        "name": "Glasgow"
      }]
    }, {
      "id": "3",
      "name": "Russia",
      "cities": [{
        "id": "5",
        "name": "Moscow"
      }, {
        "id": "6",
        "name": "St. Petersburg"
      }]
    }, {
      "id": "4",
      "name": "Spain",
      "cities": [{
        "id": "7",
        "name": "Madrid"
      }, {
        "id": "8",
        "name": "Barcelona"
      }]
    }, {
      "id": "5",
      "name": "India",
      "cities": [{
        "id": "9",
        "name": "Delhi"
      }, {
        "id": "10",
        "name": "Mumbai"
      }]
    }];
    $scope.country = $scope.data[0]; // Let USA be the default country.
    $scope.city = $scope.country.cities[0]; // Show the first city of USA by default.

    $scope.setCities = function(country) {
      $scope.city = country.cities[0];
    };
  }]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="Controller">
    <h3 data-ng-bind="title"></h3>
    <label>Country:</label>
    <select data-ng-model="country" data-ng-change="setCities(country)" data-ng-options="c as c.name for c in data">

    </select>
    <label>Cities:</label>
    <select data-ng-model="city" data-ng-options="ci as ci.name for ci in country.cities">
    </select>
  </div>
</div>