Reset the ion-option values on (ionChange)

Hi Guys,

Does anyone know how to reset the “ion-option” values of “ion-select”. I have two ion-select controls and i want my first ion-select(selectedPLocation) to change the values of my 2nd ion-select(selectedLocation) on ionChange. I am able to remove selected by setting null but i am not able to change the values of selectedLocation. Does anyone know how to reset the value of my ion-options ?

HTML:

<ion-content>
    <ion-list> 
     <ion-item>
            <ion-label>Parent Location</ion-label>
            <ion-select [(ngModel)]="selectedPLocation" (ionChange)="loadLocation()">
                <ion-option *ngFor="let parentLocation of parentLocations; let i=index" [value]="parentLocation.Key">{{parentLocation.Id}}</ion-option>
            </ion-select>
        </ion-item>
       <ion-item>
            <ion-label>Location</ion-label>
            <ion-select [(ngModel)]="selectedLocation">
                <ion-option id="locationID" *ngFor="let location of locations; let i=index" [value]="location.Key">{{location.Id}}</ion-option>
            </ion-select>
        </ion-item>
</ion-item>
    </ion-list>

Typescript:

public loadLocation() {
    let loader = this.loadingCtrl.create({
        content: "Please wait..."
    });
    loader.present();
    this.selectedLocation = null;
    
    this.locations = null;
    this.locationService.GetLocations(this.global.getApiUrl(), this.selectedSite, this.selectedPLocation).then(data => {
        loader.dismiss();
        this.locations = data;
    }).catch((err) => {
        loader.dismiss();
        let alert = this.alertCtrl.create({
            title: 'Error',
            subTitle: err,
            buttons: ['OK']
        });
        alert.present();
    });
}