IE 不更新下拉选择显示答案

【问题标题】：IE not updating drop down selection dispalyIE 不更新下拉选择显示
【发布时间】：2014-03-30 17:53:31
【问题描述】：

我有 3 个下拉菜单，其中绑定了角度范围数组。当我更新模型时，一个下拉菜单显示选择的值，但另外两个不更新显示。实际上该项目已被选中，但下拉列表显示一个空白项目。我正在使用 AngularJS v1.2.2 和 IE11 在 chrome 中它工作正常。只有在使用带有过滤器的 select ng-options 时才会出现选择问题

//$scope.Areas 绑定到下拉列表，$scope.A.Area 是 ng-model 到 Area 下拉列表，工作正常 $scope.A.Area = $scope.Areas.firstOrDefault(function (x) { 返回 x.AreaID === $scope.RespondentAreaID; }); //$scope.Regions 绑定到 Region 下拉列表，$scope.A.Region 是 ng-model 到 Region 下拉列表，不更新 IE 中的下拉显示 $scope.A.Region = $scope.Regions.firstOrDefault(function (x) { 返回 x.RegionID === $scope.A.RespondentRegionID; }); // 范围内没有像 $scope.Areas 或 $scope.Regions 这样的国家列表 // 国家被存储为带有 Region 的导航属性，所以要填充 // 国家使用选定的 Region.Countries，在 IE 中不起作用 if ((($scope.A.Region || {}).Countries || []).length) { $scope.A.Country = $scope.A.Region.Countries.firstOrDefault(function (x) { 返回 x.CountryID === $scope.RespondentCountryID; });

【问题讨论】：

在任何一组选择下拉列表中都有完全相同的问题。如果您尝试再次选择下拉列表中的值，似乎可以工作。例如：在一组 3 个日期下拉列表中选择月份，尝试选择日期，但它只在选择下拉列表中显示第一个选项。尝试再次选择一个值，它可以工作。带有 IE11 的 Angular 1.2.0-rc.2。相信您在过去几天没有找到解决方案？
感谢 areynolds，我找到了解决方案，如果我们更改下拉列表的文本，它将选择值。一旦设置了下拉值，在 stackoverflow 中找到了这个解决方案，但不记得链接 // 这是一个 IE 修复，用于不更新具有过滤器的 ng-options 的下拉部分 angular.forEach($("select"), function (currSelect) { currSelect.options[currSelect.selectedIndex].text += " "; });

标签： javascript angularjs internet-explorer-11

【解决方案1】：

在 angular.js 的 selectDirective 的渲染函数中添加几行以下位置（以粗体标记）对我来说效果很好。我正在寻找除了修补 angularJS 或下面给出的 forEach 之外是否还有其他可能的解决方案？

            if (existingOption.label !== option.label) {
              lastElement.text(existingOption.label = option.label);
              **lastElement.attr('label', existingOption.label);**
            }

和

              (element = optionTemplate.clone())
                  .val(option.id)
                  .attr('selected', option.selected)
                  .text(option.label);
              **element.attr('label', option.label);**

如果标签在 IE 中为空，则 HTMLOptionElement 的标签属性与文本属性不同。

这可以通过在屏幕加载后添加以下代码并查看 FF 和 IE 的 Web 控制台来查看差异来验证。如果您取消注释标签设置为文本的最后一行，则它可以正常工作。或者如上所述修补 angular.js。

// This is an IE fix for not updating the section of dropdowns which has ng-options with filters
angular.forEach($("select"), function (currSelect) {
    console.log("1.text ", currSelect.options[currSelect.selectedIndex].text);
    console.log("1.label ", currSelect.options[currSelect.selectedIndex].label);
    //console.log("1.innerHTML ", currSelect.options[currSelect.selectedIndex].innerHTML);
    //console.log("1.textContent ", currSelect.options[currSelect.selectedIndex].textContent);
    //console.log("1.cN.data ", currSelect.options[currSelect.selectedIndex].childNodes[0].data);
    //console.log("1.cN.nodeValue ", currSelect.options[currSelect.selectedIndex].childNodes[0].nodeValue);
    //console.log("1.cN.textContent ", currSelect.options[currSelect.selectedIndex].childNodes[0].textContent);
    //console.log("1.cN.wholeText ", currSelect.options[currSelect.selectedIndex].childNodes[0].wholeText);
    //console.log("1. ", currSelect.options[currSelect.selectedIndex], "\n");

    //currSelect.options[currSelect.selectedIndex].label = "xyz";
    //currSelect.options[currSelect.selectedIndex].label = currSelect.options[currSelect.selectedIndex].text;
});

【讨论】：