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

**URL:** <https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664>\
**Category:** ionic-v3\
**Created:** [April 7, 2016, 7:23am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664 "2016-04-07T07:23:17Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![chandroiud](https://avatars.discourse-cdn.com/v4/letter/c/8e7dd6/32.png) [@chandroiud](https://forum.ionicframework.com/u/chandroiud)\
**Post date:** [April 7, 2016, 7:23am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/1 "2016-04-07T07:23:17Z")

</div>

```
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.
```

---

<div class="post-metadata">

**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\
**Post date:** [April 7, 2016, 9:18am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/2 "2016-04-07T09:18:33Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![chandroiud](https://avatars.discourse-cdn.com/v4/letter/c/8e7dd6/32.png) [@chandroiud](https://forum.ionicframework.com/u/chandroiud)\
**Post date:** [April 7, 2016, 10:06am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/3 "2016-04-07T10:06:51Z")

</div>

Thanks Its working perfectly now!!

---

<div class="post-metadata">

**Author:** ![chandroiud](https://avatars.discourse-cdn.com/v4/letter/c/8e7dd6/32.png) [@chandroiud](https://forum.ionicframework.com/u/chandroiud)\
**Post date:** [May 20, 2016, 6:49am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/4 "2016-05-20T06:49:08Z")

</div>

I was just wondering how to get the selected value?

---

<div class="post-metadata">

**Author:** ![maxx0r](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/maxx0r/32/91299_2.png) [@maxx0r](https://forum.ionicframework.com/u/maxx0r)\
**Post date:** [May 20, 2016, 8:48am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/5 "2016-05-20T08:48:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chandroiud](https://avatars.discourse-cdn.com/v4/letter/c/8e7dd6/32.png) [@chandroiud](https://forum.ionicframework.com/u/chandroiud)\
**Post date:** [May 20, 2016, 12:43pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/6 "2016-05-20T12:43:33Z")

</div>

Thanks Worked perfectly

---

<div class="post-metadata">

**Author:** ![vuhung3990](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vuhung3990/32/100349_2.png) [@vuhung3990](https://forum.ionicframework.com/u/vuhung3990)\
**Post date:** [July 4, 2016, 10:18am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/7 "2016-07-04T10:18:18Z")

</div>

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

update:  
use **`ionChange`** instead of **`change`**

---

<div class="post-metadata">

**Author:** ![dLesjak](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@dLesjak](https://forum.ionicframework.com/u/dLesjak)\
**Post date:** [August 31, 2016, 2:44pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/8 "2016-08-31T14:44:06Z")

</div>

Thanks for update ionChange work for me!!!

---

<div class="post-metadata">

**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\
**Post date:** [September 5, 2016, 2:24pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/9 "2016-09-05T14:24:50Z")

</div>

> [@vuhung3990](#):
>
> use ionChange instead of change

Yes, that’s right, the component events in Ionic 2 have been renamed in [`2.0.0-beta.8`](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#200-beta8-2016-06-06).

---

<div class="post-metadata">

**Author:** ![chethankumar\_gowda](https://avatars.discourse-cdn.com/v4/letter/c/e480ec/32.png) [@chethankumar\_gowda](https://forum.ionicframework.com/u/chethankumar_gowda)\
**Post date:** [April 27, 2017, 12:29pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/10 "2017-04-27T12:29:20Z")

</div>

@iignatov

```auto
<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…

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [April 27, 2017, 10:47pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/11 "2017-04-27T22:47:45Z")

</div>

> [@chethankumar\_gowda](#):
>
> (change) and (cancel) not working for me, can you please help me.
> 
> How to get the selected value and index of selected value.?

All of this is described in [the docs](https://ionicframework.com/docs/api/components/select/Select/).

---

<div class="post-metadata">

**Author:** ![chethankumar\_gowda](https://avatars.discourse-cdn.com/v4/letter/c/e480ec/32.png) [@chethankumar\_gowda](https://forum.ionicframework.com/u/chethankumar_gowda)\
**Post date:** [May 2, 2017, 7:15am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/12 "2017-05-02T07:15:24Z")

</div>

@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…

---

<div class="post-metadata">

**Author:** ![yesroh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yesroh/32/108222_2.png) [@yesroh](https://forum.ionicframework.com/u/yesroh)\
**Post date:** [May 26, 2017, 2:28pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/13 "2017-05-26T14:28:33Z")

</div>

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:

```auto
        <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>

```

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

```

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [May 26, 2017, 6:26pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/14 "2017-05-26T18:26:42Z")

</div>

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)"`.

---

<div class="post-metadata">

**Author:** ![shubhamgupta28](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@shubhamgupta28](https://forum.ionicframework.com/u/shubhamgupta28)\
**Post date:** [June 20, 2017, 1:55am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/15 "2017-06-20T01:55:07Z")

</div>

Thanks mahn! Was looking for exactly this!

---

<div class="post-metadata">

**Author:** ![aaronyamil](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronyamil/32/108913_2.png) [@aaronyamil](https://forum.ionicframework.com/u/aaronyamil)\
**Post date:** [July 15, 2017, 5:29am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/16 "2017-07-15T05:29:32Z")

</div>

Thanks. This is the solution.

---

<div class="post-metadata">

**Author:** ![abhayr](https://avatars.discourse-cdn.com/v4/letter/a/90db22/32.png) [@abhayr](https://forum.ionicframework.com/u/abhayr)\
**Post date:** [July 19, 2017, 6:33am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/17 "2017-07-19T06:33:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![abhayr](https://avatars.discourse-cdn.com/v4/letter/a/90db22/32.png) [@abhayr](https://forum.ionicframework.com/u/abhayr)\
**Post date:** [July 19, 2017, 6:37am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/18 "2017-07-19T06:37:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bryanvinu](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bryanvinu/32/111899_2.png) [@bryanvinu](https://forum.ionicframework.com/u/bryanvinu)\
**Post date:** [July 27, 2017, 1:51pm UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/19 "2017-07-27T13:51:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rahulsingh9177888665](https://avatars.discourse-cdn.com/v4/letter/r/ce73a5/32.png) [@rahulsingh9177888665](https://forum.ionicframework.com/u/rahulsingh9177888665)\
**Post date:** [September 12, 2017, 10:33am UTC](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664/20 "2017-09-12T10:33:46Z")

</div>

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

Use the above approach

[Next page](https://forum.ionicframework.com/t/how-to-handle-canel-and-ok-clicks-in-ion-select/48664.md?page=2)