Question

我正在尝试使用AngularJS创建级联下拉列表，其中在第一个下拉列表中选择的选项决定了第二个下拉菜单中显示的选项。

在Chrome中，我按预期方式工作，默认选项“选择状态”和“选择城市”显示在选择状态之前和之后的下拉列表中。但是，在IE9中，级联功能正常工作，但我的初始“选择状态”和“选择城市”选项不会出现。谁能帮助我指出正确的方向？感谢。

以下是我的代码和代码段（在Chrome中正常运行，在IE9中显示空白默认值）：

(function () {
    var app = angular.module('myApp', []);

    app.controller('DefinitionController', ['$http', function ($http) {
        var definition = this;

        definition.state = {};
        definition.city = {};

        definition.states = ["AL", "AR", "AZ", "CA", "CO", "CT"];
        definition.cities = [];

        definition.GetCities = function (state) {
            //This will be replaced with an ajax call later
            if (state == "AL") definition.cities = ["Birmingham"];
            if (state == "AR") definition.cities = ["Little Rock"];
            if (state == "AZ") definition.cities = ["Tucson"];
            if (state == "CA") definition.cities = ["Los Angeles"];
            if (state == "CO") definition.cities = ["Denver"];
            if (state == "CT") definition.cities = ["Hartford"];
        };
    }]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <fieldset ng-controller="DefinitionController as definition">
        <select class="form-control" ng-model="definition.state" ng-options="state for state in definition.states" ng-change="definition.GetCities(definition.state)">
            <option value>Select a state</option>
        </select>
        <select class="form-control" ng-model="definition.city" ng-options="city for city in definition.cities">
            <option value>Select a city</option>
        </select>
    </fieldset>
</div>

Answer 1

发现我的错误。当硬编码默认值时，我需要为其赋值。所以而不是：

<option value>Select a state</option>

我需要：

<option value="">Select a state</option>

工作片段：

(function () {
    var app = angular.module('myApp', []);

    app.controller('DefinitionController', ['$http', function ($http) {
        var definition = this;

        definition.state = {};
        definition.city = {};

        definition.states = ["AL", "AR", "AZ", "CA", "CO", "CT"];
        definition.cities = [];

        definition.GetCities = function (state) {
            //This will be replaced with an ajax call later
            if (state == "AL") definition.cities = ["Birmingham"];
            if (state == "AR") definition.cities = ["Little Rock"];
            if (state == "AZ") definition.cities = ["Tucson"];
            if (state == "CA") definition.cities = ["Los Angeles"];
            if (state == "CO") definition.cities = ["Denver"];
            if (state == "CT") definition.cities = ["Hartford"];
        };
    }]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <fieldset ng-controller="DefinitionController as definition">
        <select class="form-control" ng-model="definition.state" ng-options="state for state in definition.states" ng-change="definition.GetCities(definition.state)">
            <option value="">Select a state</option>
        </select>
        <select class="form-control" ng-model="definition.city" ng-options="city for city in definition.cities">
            <option value="">Select a city</option>
        </select>
    </fieldset>
</div>

AngularJS级联下拉首选项在IE9中消失

1 个答案: