Javascript 角度-如果我选择不接受更改，则重置选择

我有一个由和标签组成的下拉列表，有一个在选择时弹出确认框的功能。简单的是/否

单击“是”将当前状态设置为从下拉列表中选择的状态，而“否”当然不会更改状态

但是，单击“否”时，下拉列表将在我们刚刚拒绝更改的状态上保持高亮显示

有没有办法让它回到当前状态

使现代化

---

下面的一些答案很好，但其中缺少的一点是，如果状态未指定值，我不会显示禁用选项。

切换到反应式表单并注册默认状态

然后可以使用默认状态调用窗体控件上的reset

-选择一个选项- {{option.name} 选择：FormControl=new FormControlthis.options[0]。名称； defaultState=this.select.value； 建造师{ this.select.valueChanges.subscribevalue=>this.setStatevalue； } ... 没有{ this.select.resetthis.defaultState； this.checkState=false； }

---

注意：我使用了一个表单控件，但这同样适用于表单组

在变量preState中保留prevois selected选项，并在用户单击no时将newState恢复为preState

export class AppComponent  {
  state;
  newState;
  preState;
  checkState = false;

  options = [
    {name:'dormant'}, 
    {name:'active'}, 
    {name:'finished'}
  ];

  setState(state) {
    this.preState = this.newState;
    this.newState = state
    this.checkState = true;
  }

  selectedOption(option) {
    return this.newState === option;
  }

  yes() {
    this.state = this.newState;
    this.checkState = false;
  }

  no() {
    this.checkState = false;
    this.newState = this.preState;
  }
}

更新：

要显示更新中提到的禁用选项，请将[selected]='！禁用选项上的“newState”：

<select (change)="setState($event.target.value)">
  <option disabled [selected]='!newState'>--Pick an option--</option>
  <option *ngFor="let option of options" [value]="option.name" [selected]="selectedOption(option.name)">{{option.name}}</option>
</select>

<div *ngIf="checkState" class="check-state">
  <p>Are you sure you want to change</p>
  <p><span class="bold">{{state}}</span> to <span class="bold">{{newState}}</span></p>
  <button (click)="yes()">yes</button><button (click)="no()">no</button>
</div>

---

因为您没有使用双向绑定，所以对变量所做的更改不会影响模板。这是我的方法：

HTML文件

---

请看我的update@physicsboy您可以做的一件事是将null作为禁用选项的值，然后如果您的状态为null，您将看到禁用的选项请查看我的更新我添加了更新所需的注意事项请查看我的更新您的代码中没有任何禁用项，即使您这样做了，我的解决方案将处理表单控件具有禁用属性的问题。行选择：FormControl=new FormControlthis。选项[0]。名称；使其默认为数组中的一个条目。残疾人在第一个标记中，因为这是一个示例。您可以将您想要的任何内容作为默认值。我选择了第一个选项，这通常是人们做的事情，甚至是你，第一个选项在你的例子中被选中，但是你可以在其中放任何你想要的东西。我的解决方案的美妙之处在于，无论第一个值是什么，重置控件总是会使其返回。

<select [(ngModel)]="state" (change)="setState()">
  <option disabled [value]="null">--Pick an option--</option>
  <option *ngFor="let option of options" [value]="option.name" >{{option.name}}</option>
</select>

<div *ngIf="checkState" class="check-state">
    <p>Are you sure you want to change</p>
    <p><span class="bold">{{lastState}}</span> to <span class="bold">{{state}}</span></p>
    <button (click)="yes()">yes</button><button (click)="no()">no</button>
</div>

  state;
  lastState;
  checkState = false;

  options = [
    {name:'dormant'}, 
    {name:'active'}, 
    {name:'finished'}
  ];

  constructor() {
    this.lastState = this.state;    
  }

  setState() {
    this.checkState = true;
  }

  yes() {
    this.checkState = false;
    this.lastState = this.state;    
  }

  no() {
    this.checkState = false;
    this.state = this.lastState;
  }