[英]How to hide selected option text in select box, Angular 4
我有這個種族下拉列表。 我想要的是,當我選擇清晰的種族時,它不應出現在選擇框中,而類似框應為空。 我怎樣才能做到這一點?
<select
#ethnicity
[(ngModel)]="patient.Ethnicity"
[class.text-dimmed]="!patient.Ethnicity"
name="ethnicity"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
<option [ngValue]="null" disabled> Select </option>
<option [ngValue]="null">Clear ethnicity</option>
<option value="Alaska-Native">Alaska Native</option>
<option value="American-Indian">American-Indian</option>
<option value="Asian">Asian</option>
<option value="African-Americans">Black or African American</option>
<option value="Hispanic">Hispanic or Latino</option>
<option value="Jewish-Ashkenazi">Jewish - Ashkenazi</option>
<option value="Jewish-Other">Jewish - Other</option>
<option value="Native-Hawaiians">Native Hawaiian or Other Pacific Islander </option>
<option value="Other">Other </option>
<option value="Unknown">Unknown </option>
<option value="White-Caucasian">White or Caucasian</option>
</select>
就像當我選擇它時,它看起來像這樣
但是我想要的是
這是我的演示,清晰的種族應該顯示在下拉列表中,但是當我選擇它時,它應該不顯示在選擇框中,就像我共享的屏幕截圖
我該怎么辦才能解決這種情況? 謝謝。
您可以像這樣處理選擇標簽的change event
。
onChange(value) {
if(value == 'Clear ethnicity'){
this.Ethnicity = '';
}
<select
#ethnicity
[(ngModel)]="Ethnicity"
[class.text-dimmed]="!Ethnicity"
name="ethnicity" (change)="onChange($event.target.value)"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
演示: https : //stackblitz.com/edit/angular-clear-option-select
您所需要做的就是刪除值“清除種族”,如下所示:
<option [ngValue]="null" [hidden]="clear.selected"></option>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.