How to handle canel and ok clicks in ion-select?

Ionic Framework ionic-v3
1 
In my app I'm using the Select component, My select component looks like this:
<ion-list>
  <ion-item>
  <ion-label>Category</ion-label>
  <ion-select [(ngModel)]="category" cancelText="cancel" okText="Confirm!">
    <ion-option value="Def1" checked="true">Def1</ion-option>
    <ion-option value="Def2">Black Def2</ion-option>
    <ion-option value="Def3" >Def3</ion-option>
    <ion-option value="Def4">Def4</ion-option>
       </ion-select>
</ion-item>
</ion-list>

Now I want to handle the click events say, If the user clicks on confirm or cancel It should show an alert or go to another page How can I handle the click events? Please help.
3 Likes
2

You can use the cancel and change events of <ion-select>:

<ion-select (cancel)="onCancel()" (change)="onChange()">
      <ion-option value="1">One</ion-option>
      <ion-option value="2">Two</ion-option>
      <ion-option value="3">Three</ion-option>
</ion-select>
9 Likes
3

Thanks Its working perfectly now!!

4

I was just wondering how to get the selected value?

5

the ngmodel is bound to your backing code. So you can use this.category to get the value from the select in the eventhandler.

1 Like
6

Thanks Worked perfectly

1 Like
7

sorry, not work for me, it’s not trigger after change

update:
use ionChange instead of change

13 Likes
8

Thanks for update ionChange work for me!!!

9

Yes, that’s right, the component events in Ionic 2 have been renamed in 2.0.0-beta.8.

3 Likes
10

@iignatov

<ion-select #thisCourseTypeElement [(ngModel)]="courseValue" (cancel)="onCancel()" (change)="onChange()" >
      <ion-option *ngFor="let item of courseOpction">{{item.course}}</ion-option>
  </ion-select>

(change) and (cancel) not working for me, can you please help me.

How to get the selected value and index of selected value.?
can you explain…

Thanks…

11

All of this is described in the docs.

12

@rapropos

Thanks for Your Response…

<select #thisGenderElement [ngModel]=“courseSelectedValue” (change)=“onCourseChange($event.target.value, thisGenderElement.selectedIndex)”>
<option *ngFor=“let item of courseOpction”>{{item.course}}

in above code am calling method “onCourseChange()” on changing selection and passing selected value and index, this what i want achieve in ionic 2.
can we it in same way, Please Let me know…

Thanks…

13

I did not understand what the documentation meant here:

The select component takes child ion-option components. If ion-option is not given a value attribute then it will use its text as the value.

and I had tried what @iignatov sugest but did not work, below some code:

        <ion-item>
            <ion-label>Name(s)</ion-label>
            <ion-select [(ngModel)]="local" (cancel)="onCancel()" (change)="abrirLocal()">
                <ion-option *ngFor="let item of items" [value]="item">{{ item.descricaoLocal }}</ion-option>
            </ion-select>
        </ion-item>

  abrirLocal(local) {
    console.log(local.target.value)
  }

I want to get the item that the user choose, but with that I can.

14

It is unusual for you to need both a change handler and an [(ngModel)] binding. The local property in your controller should always reflect the selected value if you have [(ngModel)]="local". If for whatever reason you still feel the need for a change handler, it should accept the ionChange event, and if you are expecting it to get an argument, you need to pass it one: (ionChange)="abrirLocal($event)".

15

Thanks mahn! Was looking for exactly this!

16

Thanks. This is the solution.

17

How to handle canel button or unselect the selected option in ion-select?

18

How to handle canel button ? i want to unselect the already selected option when click on cancel or any other way to unselect option ?

1 Like
19

What if I want to detect when the user clicks on the ion-option? Is there an event for clicked ion-option?

20

(ionCancel)=“onCancel($event)” (ionChange)=“abrirLocal($event)”

Use the above approach

4 Likes