Question

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

在第一个或国家/地区下拉列表中，一个国家/地区将默认为默认国家/地区。

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

以下是我的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＆amp; vanilla JS（没有JQuery）。我不想使用angular.forEach

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

Answer 1

纯JavaScript代码。仅供您参考，万一你真的无法搞清楚。但下次让我们知道你至少尝试过什么。

<select id="ddlCountries" onchange="onChange()"></select>
<select id="ddlCities"></select>

<script>
    var ddlCountries = document.getElementById("ddlCountries");
    var ddlCities = document.getElementById("ddlCities");
    var data = []; // your json array
    var defaultCountry = data[0];
    loadAllCountries();
    loadDefaultCities();

    function loadAllCountries() {
       for (var i = 0; i < data.length; i++) {
            var currentCountry = data[i];
                addCountry(currentCountry);
            }
        }
        function loadDefaultCities() {
            addCities(defaultCountry.cities, defaultCountry);
        }
        function addCountry(currentCountry) {
            var option = document.createElement("option");
            option.text = currentCountry.name;
            option.value = currentCountry.id;
            ddlCountries.appendChild(option);
        }
        function addCities(cities, currentCountry) {
            for (var i = 0; i < cities.length; i++) {
                var option = document.createElement("option");
                option.text = cities[i].name;
                option.value = cities[i].id;
                ddlCities.appendChild(option);
                ddlCities.selectedIndex = 0;
            }
        }
        function onChange() {
            var selectedCountry = data.find(findById);
            clearDropdownlist(ddlCities);
            addCities(selectedCountry.cities, selectedCountry);
        }
        function findById(country) {
            return country.id == ddlCountries.value;
        }
        function clearDropdownlist(ddl) {
            while (ddl.firstChild) {
                ddl.removeChild(ddl.firstChild);
            }
        }
</script>

Answer 2

这是一种使用data-ng-options（ng-options）来实现此目的的方法：

希望这有帮助。

＆＃13;

(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];
    };
  }]);
})();

＆＃13;

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

＆＃13;

Javascript - 如何创建国家/地区的级联下拉列表AngularJS中默认选择一个国家/地区的城市？

2 个答案: