Setup ion-select to have one value for drop down but a different value for selected

Ionic Framework ionic-v3
1

We have a ion-select drop down box with States or Provinces.
The drop down list has long name, Utah, California … even longer provinces.
What I’m trying to do is show the long name, but after one is selected to show the abbreviation (which is our id value we are using for the list).

Our list is setup like this.
{
“id”: “USA”,
“states”:[
{
“id”:“AL”,
“value”:“Alabama”
},
{
“id”:“AK”,
“value”:“Alaska”
},

…

Show value in the drop down, but when its selected show id field.
This this possible?

2

You can use the selectedText property of the ion-select component.

To do what you’re looking for the following pseudo-code should work, assuming you’re using an ngFor to loop through your list and a reactive form. You may have to modify for the addition of country:

<ion-select formControlName="state" selectedText="myForm.controls.state.value">
		<ion-select-option *ngFor="let state of stateArray" value="{{ state.id }}">
			{{ item.value }}
		</ion-select-option>
</ion-select>

Another method would be to use the ionChange change event:

HTML:

<ion-select selectedText="selectedStateId" (ionChange)="onStateChange($event)">
		<ion-select-option *ngFor="let state of stateArray" value="{{ state.id }}">
			{{ item.value }}
		</ion-select-option>
</ion-select>

Component:

public selectedStateId = '';

onStateChange(event: any) {
	this.selectedStateId = event.value.id;
}

EDIT: I’m not sure if what I put here works in ionic 3. I’ve only ever used ionic 4 and just noticed the tag for v3

3

Thanks this worked perfectly.
My new code

<ion-col>
                        <ion-item>
                            <ion-label *ngIf="endCountrySelection=='USA'" floating>{{'STATE'|translate}}</ion-label>
                            <ion-label *ngIf="endCountrySelection=='CAN'" floating>{{'PROV'|translate}}</ion-label>
                            <ion-select [ngModel]="endStateSelection" (ionChange)="endStateChange($event)" #endState="ngModel" selectedText="{{endStateSelection}}" name="endState">
                                <ion-option *ngFor="let es of endStates" [value]="es.id">{{es.value}}</ion-option>
                            </ion-select>
                        </ion-item>
                    </ion-col>