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>

Answer 2

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