Angular11中IE浏览器下拉框display:none无法隐藏空选项问题

问题原因 #

IE浏览器对<option>标签的hidden属性和display:none样式支持存在兼容性缺陷，即使设置了这些属性，当表单控件值被设为空字符串时，IE仍会强制显示对应的空选项，而Chrome能正常隐藏。

解决方案 #

方案1：替换空字符串为null，并移除手动空选项

修改TypeScript代码，将重置值从空字符串改为null，同时移除HTML中手动添加的空选项，利用Angular表单控件的默认行为处理空值：

修改后的test.component.ts

this.myForm.controls['City'].valueChanges.subscribe(this.onCityChange.bind(this));

onCityChange() {
  // 用null代替空字符串，避免IE生成空选项
  this.myForm.get('City').patchValue(null);
}

修改后的test.component.html

<form [formGroup]="myForm">
    <select [id]="control.Id" [formControlName]="control.Id">
      <ng-container *ngFor="let item of control.Items">                        
         <option [value]="item.Value">{{item.Key}}</option>
       </ng-container>
     </select>
</form>

方案2：保留空选项，添加IE兼容的隐藏样式

如果必须保留空选项的设置，可通过IE专属CSS样式强制隐藏空选项：

添加全局CSS样式

/* 针对IE浏览器隐藏空选项 */
select option[value=""] {
  display: none\9; /* 适配IE8-IE10 */
  display: none\0; /* 适配IE11 */
}

HTML代码调整（保留空选项但简化属性）

<form [formGroup]="myForm">
    <select [id]="control.Id" [formControlName]="control.Id">
      <ng-container *ngFor="let item of control.Items">                        
         <option [value]="item.Value">{{item.Key}}</option>
       </ng-container>
       <!-- 仅保留必要属性，依赖CSS隐藏 -->
       <option disabled value=""></option>
     </select>
</form>

说明 #

推荐优先使用方案1，因为它利用Angular表单的原生行为，避免了浏览器兼容性问题，代码更简洁可靠。方案2适合需要保留空选项逻辑的场景，通过CSS兼容IE。

内容的提问来源于stack exchange，提问作者Asif Zaidi