如何交换两个 HTML <select> 元素的选项值？答案

【问题标题】：How can I swap option values of two HTML <select> elements?如何交换两个 HTML <select> 元素的选项值？
【发布时间】：2020-08-06 00:04:30
【问题描述】：

我试图在我的货币转换器中交换两个选择选项值。我有一个链接图标，它激活了交换两个值的 swapOptions 函数。这部分工作正常。问题是如何将这个新值设置为“选择”元素？

这是我的打字稿功能，我可以在控制台中看到应该在选择选项中设置的新值：

startSwap:any;
endSwap: any;
swapOptions(firstOption: any, secondOption: any){

for(let i = 0; i < this.parsedJson.length; i++){
  if(firstOption == this.parsedJson[i].Srednji){
    this.endSwap = this.parsedJson[i].SelectOption;
  }
  else if(secondOption == this.parsedJson[i].Srednji){
    this.startSwap = this.parsedJson[i].SelectOption;
  }
}
console.log("New start option : "+this.startSwap)
console.log("New end option : "+this.endSwap)
}

这是我的html。我曾尝试使用 [(ngModel)] 但在更改时我得到空的选择元素。

  <select name="options" #firstSelect id="slc" class="form-control" [(ngModel)]="startSwap">
      <option *ngFor="let a of parsedJson;" class="form-control" (click)="firstSelectValues(a.Jedinica, a.Valuta)" (click)="intervalCurrencyStats()" [(value)]="a.Srednji">{{a.SelectOption}}</option>
    </select>
    <p id="p">End value:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#converter" style="cursor: pointer;" (click)="swapOptions(firstSelect.value, secondSelect.value)" ><i class="fa fa-arrows-v"></i></a></p>
    <select name="options2" #secondSelect id="slc" class="form-control" [(ngModel)]="endSwap">
      <option *ngFor="let a of parsedJson;" class="form-control" (click)="secondSelectValues(a.Jedinica, a.Valuta)" [(value)]="a.Srednji">{{a.SelectOption}}</option>
    </select>

在这张图片上，您可以看到两个选择选项元素和链接到 swapOption 函数的蓝色箭头。空白字段是单击箭头的结果。

欢迎任何建议。提前致谢！

Angular CLI：9.1.8 节点：12.13.0

【问题讨论】：

试试：swapOptions() { const cloned = Object.assign({}, this.startSwap); this.startSwap = this.endSwap; this.endSwap = 克隆； }

标签： html angular typescript

【解决方案1】：

一段时间后，我想出了这个。现在使用 formGroup 和表单控件

import { FormControl, FormGroup, FormsModule, FormBuilder } from '@angular/forms';

HTML 的一些变化：

  <form [formGroup]="crForm">
    <select name="options"  #firstSelect id="slc" class="form-control" formControlName="crControl">
      ...
    </select>
    <select name="options2" #secondSelect id="slc" class="form-control" formControlName="crEndControl">
      ...
    </select>
  </form>

并且在 typescript 中添加了 private fb: FormBuilder 在构造函数中，以及用于在 select-option 中设置新值的 formbuilder 组（也在 onInit() 中添加了硬编码的默认值）：

this.crForm = this.fb.group({
  crControl: [this.startSwap],
  crEndControl: [this.endSwap]
})

【讨论】：