AngularJS 级联下拉列表第一个选项在 IE9 中消失

Question

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

在 Chrome 中，一切正常，默认选项 "Select a state" 和 "Select a city" 显示在选择状态前后的下拉列表中。然而，在 IE9 中，级联功能正在运行，但我最初的 "Select a state" 和 "Select a city" 选项没有出现。谁能帮我指出正确的方向？谢谢

这是我的代码和片段（在 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 中消失

AngularJS cascading dropdown first option disappearing in IE9

internet-explorer-9

angularjs