Why is the event target the select element rather than the option selected?

Question

Using angular 11 and trying to get the value of the option element when I select an option. I've looked at probably 20 docs / so answers that say to do this:

html:

    <select class="ui-select ui-select--large" (change)="fn($event)">
      <option [value]="null" selected disabled>Select somthing</option>
      <ng-container *ngIf="values">
         <option *ngFor="let value of values [value]="value.id">{{ value.name }}</option>
      </ng-container>
    </select>

ts:

  fn(event) {
    console.log(event.target);
  }

When I select an option the select element itself gets logged, not the option element that I selected. Why?

The change event it's on select so it's normal the target is it self — Simone Rossaini, May 21 '21 at 06:14
@NiettheDarkAbsol then why does this answer which was accepted with 800+ upvotes say to do this? https://stackoverflow.com/questions/33700266/how-can-i-get-new-selection-in-select-in-angular-2 (many other answers also say this) Anyway if this is wrong, then how can I access the option value? — HelloWorld, May 21 '21 at 06:17
This isn't like the click event. As mentioned in the comments, it is the `select` element that is the target of the change event. The options aren't changing — Jon P, May 21 '21 at 06:17
@HelloWorld, you are miss reading `$event.target.value` if that is what you are referring to in the link. That is the value of the select box, determined by the selected option. Form elements have a value attribute/property — Jon P, May 21 '21 at 06:21
@JonP - looking at the event object you are definitely right! If you'd like please make this an answer so I can accept and others can learn. — HelloWorld, May 21 '21 at 06:23

score 3 · Accepted Answer · answered May 21 '21 at 06:26

3

Basically, the select element is the target of the change event. The options don't change. This is a little different from the click event.

The select element has a value attribute/property you can access with event.target.value

answered May 21 '21 at 06:26

Jon P

19,442
8
49
72

score 1 · Answer 2 · answered May 21 '21 at 06:31

you can use a more closer Angular way, see the docs

Usign a variable and ngModel two binding

//define a variable in ts
value:any
<select class="ui-select ui-select--large" [(ngModel)]="value">
   ...
</select>
{{value}} <--to check the variable

You always has in the variable "value" the value

Using two binding "split" the bannana notation to add a function:

//define a variable in ts
value:any
<select class="ui-select ui-select--large" [ngModel]="value"
   (ngModelChange)="value=$event;fn($event)">
   ...
</select>
{{value}} <--to check the variable

Using a template reference variable

//define a variable in ts
value:any
<select #myselect class="ui-select ui-select--large" 
   [value]="value"
   (change)="fn(myselect.value)">
   ...
</select>

See that, in this case "value" not is actualized -only it's used to give an initial value

Why is the event target the select element rather than the option selected?

2 Answers2