How to pre select ionic select box

Ionic Framework ionic-v3
1

Hi,

I wanted to select an option of a dropdown box (select box) programmatically, but I am not able to archive it in ionic2. Any help will be appreciated.

Thanks,

Akhil

2

What have you tried? (post your code). I think I have done this, just by setting the model value in my component.

3

You can use ngModel for this

<ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="toppings">
    <ion-option value="bacon">Bacon</ion-option>
    <ion-option value="extra cheese">Extra Cheese</ion-option>
    <ion-option value="pepperoni">Pepperoni</ion-option>
  </ion-select>
<ion-item>

export class MyClass {
  constructor(){
    this.toppings = 'pepperoni';
  }
}
3 Likes
4

I am aware of selecting the dropbox this way, but my use case is bit different.

export class MyClass {
  constructor(){
    this.dbService.getTasks().then((data) => {
       this.toppings = data.res.rows.item(0).toppings;
    });
  }
}

The above code doesn’t selects any option in the dropbox

5

Are you using two way data-binding? e.g [(ngModel)]=“toppings”

6

Yes I am using two way data binding e.g [(ngModel)]=“toppings”

7

Hi,

Please suggest any resolution to my problem, If the replace <ion-select> with <ion-input> , then it works fine.

8

Could you provide a minimal codepen?

http://codepen.io/tlancina/pen/EPBdVE/

9

@akhil, I would suggest you to double-check if the value you’re trying to set as selected option of the <ion-select> component is really among the possible options of the component. This might sound too simple and obvious at first, but sometimes the simplest mistakes might be pretty hard to spot. That’s because some things are so simple that they’re taken for granted and one looks for the problem elsewhere but not there.

If you’re generating the options of the <ion-select> component dynamically, I would recommend you to use a predefined list of options instead, just like @mhartington suggested, to find out if the problem is in Ionic or somewhere in your other code:

<ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="toppings">
    <ion-option value="bacon">Bacon</ion-option>
    <ion-option value="extra cheese">Extra Cheese</ion-option>
    <ion-option value="pepperoni">Pepperoni</ion-option>
  </ion-select>
</ion-item>

export class MyClass {
  constructor() {
    // This should work as expected - it matches the value of the 3rd option.
    this.toppings = 'pepperoni';
    // This on the other side won't work, because it's not among the options.
    //this.toppings = 'whatever';
  }
}

This might explain why the binding is working fine for <ion-input> (where the value is only displayed) but doesn’t work for <ion-select> (where the value must match one of the options).

10

I found one dirty solution, until someone suggests better fix.

export class MyClass {
  constructor(){
    this.dbService.getTasks().then((data) => {
       setTimeout(() => {
              this.priority = data.res.rows.item(0).toppings;
       }, 100);
    });
  }
}
11

This issue is fixed in the latest releases.

12

Hello, I´m currently trying to do the same and it´s not working with this code:

<ion-select [(ngModel)]="appointment.Hook" okText="Seleccionar" cancelText="Cancelar"> <ion-option *ngFor="#_hook of hooks" [value]="_hook"> {{_hook.ID}}: {{_hook.Name}} </ion-option> </ion-select>

And I´m very lost here since I see the collection ‘hooks’ correctly when I open the select:
image

Maybe an error on the constructor?:
` constructor(private _nav: NavController, private _navParams: NavParams, private _lu: LookupService) {
//obtener los competitors del LuServ
debugger;
this.appointment = _navParams.data.appointment;
this.configuration = _navParams.data.configuration;
this.ts = this.appointment.TargetAndSegmentation;

this.competitors = _lu.competitors;
this.keys = _lu.keys;
this.siOtros = _lu.wwc;
this.noSdzs = _lu.nwws;
this.hooks = _lu.hooks;

this.competitor1 = this.appointment.FirstCompetitor;
this.competitor2 = this.appointment.SecondCompetitor;
this.competitor3 = this.appointment.ThirdCompetitor;
this.key1 = this.appointment.Key1;
this.key2 = this.appointment.Key2;    
this.noSdz = this.appointment.NotWorksWithSandoz;
this.siOtro = this.appointment.WorksWithCompetitors;    
this.hook = this.appointment.Hook;

}`

Also, when I submit the form I can see the appointment.Hook property correctly modified with my selection, so I guess databinding is correctly working.

?Âż?Âż?.

Thanks in advance! :slight_smile:

…sorry for the spanish on some text…

13

Thanks for this but my requirement is little different . My data is coming from api and plant is an object .

<[value]=“plant” [selected]=“plant.idBranch==location”> . i want to show as when idBranch match with some data

14

this worked for me thanks :grinning: