How to get the value from ion-select option

Question

I have an array of object called options.

this is my html code

    <ion-item>
        <ion-label>place</ion-label>

        <ion-select [(ngModel)]="place" (click)="optionsFn(item);">
          <ion-option value="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option> 
        </ion-select>
      </ion-item>

{{salespriceOp}}

{{quantityOp}}

this is my .ts file code

product_option_value_idOp
  priceOp
  salespriceOp
  quantityOp
  skuOp
  nameOp

  options =  [
          {
            "product_option_value_id": "45",
            "name": "Bangalore Auto",
            "quantity": "12",
            "sku": "56876",
            "price": "100.00",
            "salesprice": "50"
          },
          {
            "product_option_value_id": "51",
            "name": "Hyderabad Auto",
            "quantity": "23",
            "sku": "56543",
            "price": "200.00",
            "salesprice": "60"
          },
          {
            "product_option_value_id": "52",
            "name": "Delhi Auto",
            "quantity": "14",
            "sku": "98767",
            "price": "300.00",
            "salesprice": "80"
          }
        ];
  constructor(public navCtrl: NavController) {

  }

  optionsFn(item) {//here item is an object 
    console.log(item);
    this.product_option_value_idOp = item.product_option_value_id;
    this.priceOp = item.price;
    this.salespriceOp = item.salesprice;
    this.quantityOp = item.quantity;
    this.skuOp = item.sku;
    this.nameOp = item.name;
  }

i am able to invoke the function but i am getting undefined in console.log(item)

its not working because you are calling `optionsFn` function from select tag. you have to add it on `ion-option` tag — ranakrunal9, Sep 15 '16 at 05:53
@ranakrunal9 i think click functions should be used on `ion-select` tag only if i use in `ion-options` tag i am not able to invoke the function itself — Mohan Gopi, Sep 15 '16 at 05:58
So for using it to ion-select you have to assign `[value]=item` in `ion-option` and need to use `gaming` in your `optionsFn` function. so remove argument from `optionsFn` and try to check. — ranakrunal9, Sep 15 '16 at 06:04
The value of each option is being set to `nes`. You are binding the value of select to something called `gaming` but you don't seem to have that in your component class. Can you please post your full component class. — Brad, Sep 15 '16 at 06:55
@Brad i think you are mistaken i am trying to send the item object as a parameter `optionsFn(item)` — Mohan Gopi, Sep 15 '16 at 08:27

sebaferreras · Accepted Answer · 2017-07-27T06:42:00.473

30

There were several things that together caused that error. The first change there is that instead of using the click event like this:

(click)="optionsFn(item);

You should use the ionChange event that Ionic exposes like this:

(ionChange)="optionsFn();"

Also notice that since you use the [(ngModel)]="place" to bind the select element to one of your component's properties, you don't need to send the item as a parameter, because this.place will be the selected item when the ionChange event is triggered.

That's why your optionsFn method would look like this:

public optionsFn(): void { //here item is an object 
    console.log(this.place);

    let item = this.place; // Just did this in order to avoid changing the next lines of code :P

    this.product_option_value_idOp = item.product_option_value_id;
    this.priceOp = item.price;
    this.salespriceOp = item.salesprice;
    this.quantityOp = item.quantity;
    this.skuOp = item.sku;
    this.nameOp = item.name;
  }

edited Jul 27 '17 at 06:42

answered Sep 15 '16 at 09:31

sebaferreras

44,206
11
116
134

1

in your plunker you are using the sale price and pice inside the ion-list itself but i need to display outside the list so only i try to send the entire object as parameter – Mohan Gopi Sep 15 '16 at 09:58
But you can use `place?.salespriceOp` to show it where ever you want because it's part of the component. – sebaferreras Sep 15 '16 at 10:34
If you want I can change the plunker to show you how to do it :) – sebaferreras Sep 15 '16 at 10:40
how to make the options to be get selected at the first point because my ion-option initially showing null. i tried using `checked="true"` but i am not able to see the selected option initially – Mohan Gopi Sep 15 '16 at 13:13
In the constructor, you should do `this.place = this.options[0]` (if you want to select the first item). – sebaferreras Sep 15 '16 at 22:21
No clicking the options field i need to show the price and name but after clicking any of the options i need to show only name in the field . and also i am not getting the field to show in the option at initial – Mohan Gopi Sep 19 '16 at 04:56

score 1 · Answer 2 · answered Oct 25 '17 at 01:47

Use (ngModelChange) instead of (click) event.

(ngModelChange)="optionsFn()"

whenever the model value changed the ngModelChange will automatically call the relative function.

<ion-item>
  <ion-label>place</ion-label>
  <ion-select [(ngModel)]="place" (ngModelChange)="optionsFn(item)">
      <ion-option value="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option> 
  </ion-select>
</ion-item>

Azam Alvi · Answer 3 · 2021-03-17T18:12:47.817

You can do like this

<ion-select (ionChange)="itemId = $event.target.value">
  <ion-select-option *ngFor="let s of itemIds" value="{{s.id}}">{{s.name}}</ion-select-option>
</ion-select>

OR you can also do like this

<ion-select value="{{itemId}}" [(ngModel)]="itemId">
  <ion-select-option *ngFor="let s of itemIds" value="{{s.id}}">{{s.name}}</ion-select-option>
</ion-select>

And in you .ts file just declare variable itemId;

score 1 · Answer 4 · answered May 01 '21 at 11:35

1

As per my experience insted of (ionChange)="optionsFn();" we can use the [(ngModel)]="selectVariable" which can be easily fetch later at the .ts file

answered May 01 '21 at 11:35

Kunal Chikte

29
1
8

score 0 · Answer 5 · answered Feb 26 '21 at 14:23

On ion-select element set #id and (ionChange)="anyFunc()"

<ion-select (ionChange)="anyFunc()" #anyName>
  <ion-option value="{{item.id}}" *ngFor="let item of apicall?.items"></ion-option>
</ion-select>

Edit the ts file accordingly. Most importantly set ViewChild as a Select type from ionic-angular

import { Select } from 'ionic-angular';

@ViewChild('anyName') theSelectObject: Select;

contructor() { }

anyFunc() {
    const theValue = this.theSelectObject.value;
}

and Good luck!

score 0 · Answer 6 · answered Oct 28 '22 at 08:21

0

In html

<ion-select  (ionChange)="optionsFn($event)">
<ion-option    *ngFor="let item of options" [value]="item.name"> 
  {{item.price}}</ion-option> 
 </ion-select>

In .ts

 optionsFn(event) {
 console.log(event);
}

answered Oct 28 '22 at 08:21

Demsey.Roll

1
2

need to add some text for explanation – Karthic G Nov 01 '22 at 04:43

ranakrunal9 · Answer 7 · 2016-09-15T06:11:59.033

-1

Check after making below changes :

// html change

<ion-select [(ngModel)]="gaming" (change)="optionsFn();">
  <ion-option [value]="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option> 
</ion-select>

//.ts change

optionsFn() {
  console.log(this.gaming);
  let item = this.gaming;
  this.product_option_value_idOp = item.product_option_value_id;
  this.priceOp = item.price;
  this.salespriceOp = item.salesprice;
  this.quantityOp = item.quantity;
  this.skuOp = item.sku;
  this.nameOp = item.name;
}

edited Sep 15 '16 at 06:11

answered Sep 15 '16 at 06:06

ranakrunal9

13,320
3
42
43

1

can you please check by changing `value="item"` to `[value]="item"` – ranakrunal9 Sep 15 '16 at 06:12
i think [] this brackets are used in angular 2 to get the value for ts file to html – Mohan Gopi Sep 15 '16 at 06:13

How to get the value from ion-select option

7 Answers7

Linked