如何在Modal中重置下拉框至默认<option>选项

我明白你现在的需求：每次打开Modal或者提交数据到数据库后，要把两个Select2下拉框重置回默认的-/-选项，避免保留之前选中的值。结合Angular的特性和Select2插件的使用，我给你两个实用的解决方案：

方案1：Angular双向绑定+Select2同步更新（推荐） #

这是最贴合Angular开发风格的做法，通过绑定变量来控制选中状态，同时同步Select2的UI：

第一步：给下拉框添加双向绑定 #

修改你的HTML代码，给每个select加上[(ngModel)]，绑定到组件内的变量：

<div class="form-group"> 
  <label class="control-label dash-control-label col-sm-3" for="">Tax:</label> 
  <div class="col-sm-3"> 
    <select id="taxSelect" class="form-control dash-form-control select2" style="width: 100%;" 
            data-minimum-results-for-search="Infinity" [(ngModel)]="selectedTaxId">
      <option disabled [ngValue]="null">-/-</option> 
      <option *ngFor="let tax of taxes" [value]="tax.id"> {{tax.title}} </option> 
    </select> 
  </div> 
  <label class="control-label dash-control-label col-sm-3" for="">UoM:</label> 
  <div class="col-sm-3"> 
    <select id="unitOfMeasureSelect" class="form-control dash-form-control select2" style="width: 100%;" 
            data-minimum-results-for-search="Infinity" [(ngModel)]="selectedUomId">
      <option disabled [ngValue]="null">-/-</option> 
      <option [value]="um.id" *ngFor="let um of unitOfMeasures">{{um.title}}</option> 
    </select> 
  </div> 
</div>

第二步：在组件中实现重置逻辑 #

在Modal组件类里定义绑定变量，再写一个重置方法：

// 组件类中声明绑定变量
selectedTaxId: number | null = null;
selectedUomId: number | null = null;

// 重置下拉框的方法
resetDropdowns(): void {
  // 重置Angular绑定的变量到默认值
  this.selectedTaxId = null;
  this.selectedUomId = null;
  // 同步更新Select2的UI，因为插件不会自动监听ngModel变化
  $('#taxSelect').select2('val', null);
  $('#unitOfMeasureSelect').select2('val', null);
}

第三步：触发重置 #

• 打开Modal时：如果用的是Angular Material Modal或类似库，可以在Modal的ngOnInit钩子，或者打开Modal的回调里调用this.resetDropdowns()；
• 数据提交成功后：在你的数据库新增操作的成功回调函数中，调用this.resetDropdowns()即可。

方案2：直接操作DOM（适合不想用双向绑定的场景） #

如果不想引入双向绑定，也可以直接通过Select2的API来重置下拉框：

resetDropdowns(): void {
  // 用Select2 API重置选中值
  $('#taxSelect').select2('val', null);
  $('#unitOfMeasureSelect').select2('val', null);
  // 同步原生select的value，避免数据不一致
  document.getElementById('taxSelect')!.value = '';
  document.getElementById('unitOfMeasureSelect')!.value = '';
}

同样在Modal打开和提交成功后调用这个方法就行。

小提示 #

• 如果你开启了Angular严格类型检查，注意变量类型要兼容null；
• 确保jQuery和Select2依赖已经正确引入，并且在DOM渲染完成后再调用Select2的API（比如在ngAfterViewInit中初始化Select2）。

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