CODEWITHSUNDEEP
angular
k11k2
k11k2

Reputation: 2044

Clear selected value from select element after every change

I have drop down and text field. The selected value from drop down displayed in text field. Now I want to clear the selected value i.e; display empty on drop down but for the first time it clearing and for rest it not working.

DEMO

I just want to show empty space on dropdown for every selection

enter image description here

Upvotes: 2

Views: 3444

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73731

You can make your code work by forcing change detection before resetting the bound value. This probably ensures that the change made in the select element is processed before we then set it to an empty value. See this stackblitz.

logNoteSelectionChange(obj) {
  this.Otherlogs = obj;
  this.changeDetectorRef.detectChanges();
  this.selectedLog = '';
}

Alternatively, you could remove the [(ngModel)] data binding on the select element:

<select #select ngModel (ngModelChange)="logNoteSelectionChange(select, $event)">
  <option *ngFor="let log of logCol">
    {{log.logMessage}}
  </option>
</select>

and reset the selected value in the (ngModelChange) event handler:

logNoteSelectionChange(select: HTMLSelectElement, obj: string) {
  this.Otherlogs = obj;
  select.value = "";
}

See this stackblitz for a demo.

Upvotes: 1

Kraken
Kraken

Reputation: 1955

If i understood you correct and rely on previous question it is more clearer resolution

`<select #select class="form-group"
   (change)="logNoteSelectionChange(select,select.value)">
     <option *ngFor="let log of logCol">
        {{log.logMessage}}
     </option>
 </select>

`

here is a link to stackblitz

Upvotes: 0

Related Questions