How to get selected value from dropdown on button click

how to get selected value from drop down on button click. anyone help me in this?
It will be highly appreciated. Thanks

Please add these html code in your html file

<ion-list>
    <ion-item>
      <ion-label>Hair Color</ion-label>
        <ion-select [(ngModel)]="hair_color" name="hair-color" placeholder="Select Hair Color">
          <ion-select-option value="brown">Brown</ion-select-option>
          <ion-select-option value="blonde">Blonde</ion-select-option>
          <ion-select-option value="black">Black</ion-select-option>
          <ion-select-option value="red">Red</ion-select-option>
        </ion-select>
    </ion-item>

   
      <ion-button (click)="select_dropdown_value()">Submit</ion-button>
 
  </ion-list>

and then add these lines of code in your type script file

export class HomePage {

  hair_color = '';

  constructor() {}

  select_dropdown_value(){

    alert(this.hair_color)
   //or
   console.log(this.hair_color)
  }

}


Please check it @flycoders_sourav its work for me

1 Like

Thanks for your effort. I will try to do it.

no problem its My Pleasure bro

1 Like

This is my html bro.

                               <div class="form-group">
                               <ion-select [(ngModel)]="price_id">
                                <ion-option  *ngFor="let price of item.price_list; let i=index" value="{{price.price_id}}" [selected]='i===0'>{{price.price_quanty}}-{{price.price_quanty_unit}} Rs.{{price.net_price}} </ion-option>
                              </ion-select>
                               </div>

Am not able to getting selected value from drop drown. but while i click on drop down and select any price list on that time its working
Thanks

show me you json data

1 Like
product_id 107
product_name onion
availability Yes
available_quantity_unit 0
nutrition
benefits
description

sub

express_delivery Yes
express_delivery_slot Express Delivery: In 90 minutes
offer_zone No
time_slot Today Evening
image http://192.168.0.12/dhupguri_bazaar/site/assets/upload/product/large/042730100_1515137952.jpg
multiple_image […]
0 042730100_1515137952.jpg
product_mrp 60
product_discount 20
product_net 48.00
available_quantity 0
price_list […]
0 {…}
price_quanty 1
price_quanty_unit kg.
mrp 60
net_price 48.00
discount 20
price_id 259
qty 1
isVisible 0
brand_name Patanjali

Selected is not working in ionic
add in your html

<ion-item>
      <ion-label>Hair Color</ion-label>
        <ion-select [(ngModel)]="SelectedPrice" name="hair-SelectedPrice" placeholder="Select Quantity">
          <ion-select-option *ngFor="let item of Price" [value]="item">{{item.price_quanty}} {{item.price_quanty_unit}} == {{item.net_price}}</ion-select-option>
        </ion-select>
    </ion-item>

and then add in your type script

 Price = [
    {id: 1, price_quanty: '1', price_quanty_unit: 'kg', net_price: '100'},
    {id: 2, price_quanty: '2', price_quanty_unit: 'kg', net_price: '200'},
    {id: 3, price_quanty: '3', price_quanty_unit: 'kg', net_price: '300'},
    ];

//[(ngModel)]="SelectedPrice" its your selected value
SelectedPrice = [this.Price[2]]; 

try this

Yes i can understand your code but while load my app on that time selected a value based on index.
just i want the drop down index value without tap on drop down. Hope you can understand my requirements. really am appreciated your effort.
Thanks