Как программно изменить выбранный параметр в HTML-теге выбора

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

Не использовать Javascript для запроса DOM / установить значения

Кроме того, из того, что вы опубликовали, вам не нужен индекс (хотя, может быть, вам это нужно)

Вместо этого вы можете сделать это:

<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];
  }
}

Это был бы угловой путь и правильный подход

Answer 2

при выборе все, что вам нужно сделать, это установить атрибут 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";