Question

我在html中有一个选择组来选择价格范围。用户可以选择一个范围，然后根据选择过滤结果。这可以正常工作，但是用户也可以从完全不同的位置（搜索框）重置结果。我需要更改选择框中实际显示的选择，因此我可以将其重置为“全部显示”，这样当用户实际重置搜索结果时，它看起来仍然不会按价格范围进行过滤框。

我可以更改通过以下方式选择的实际值：

document.getElementById("selectedPriceRange").setAttribute("value","0")

这实际上会更改选择框中保存的值，但是框本身仍显示最后选择的那个选项。

如何在不物理选择其他选项的情况下更改选择框中显示的文本？

这是我的选择框：

<select #priceRangeOptions class="custom-select" id="inputGroupSelect01">
     <option *ngFor="let priceRange of priceRangeOptions; let i=index"
     id="selectedPriceRange" [value]="i">{{priceRange}}</option>
</select>

Answer 1

选择所有要做的就是设置ngModel属性，然后可以将变量值更改为设置值。

<select #priceRangeOptions [(ngModel)]="selectedValue" class="custom-select" id="inputGroupSelect01">
 <option *ngFor="let priceRange of priceRangeOptions; let i=index"
 id="selectedPriceRange" [value]="i">{{priceRange}}</option>
</select>

selectedValue = 'my selected value.';

或者您可以使用JavaScript来实现

document.getElementById('inputGroupSelect01').value = "value";

Answer 2

不要使用Javascript查询DOM /设置值

此外，从您发布的内容中，您不需要索引（尽管可能需要）

相反，您can do this:

<select #priceRangeOptions class="custom-select" id="inputGroupSelect01" [(ngModel)]="option">
     <option *ngFor="let option of options;"
     id="selectedOption" [value]="option">{{option}}</option>
 </select>

<button type="button" (click)="setHotDog()">Choose the hotdog</button>

[（）]语法表示双向绑定。

作为概念证明，此打字稿设置模型值：

export class AppComponent  {
  name = 'Angular';
  option: string;
  options: string[] = ['One', 'Another Choice','Wow, A Hotdog?'];

  setHotDog(){
    this.option = this.options[2];
  }
}

这将是Angular方式，也是正确的方法

如何以编程方式更改html select标记中的选定选项

2 个答案: