CODEWITHSUNDEEP
ionic-frameworkionic2
Aseel Ali
Aseel Ali

Reputation: 55

Ionic 2: How to show second dropdown data based on previous dropdown selection in ionic 2 with json

I have a registration page in which i have 3 combobox. One contains country names, second one contains state and third one contains district.so when i select a country corresponding state should come, and when i select state corresponding district should come. I have json contaiing districts and states which in file location assets/data/region.js How can i do this? Pls help

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { MatriproPage } from '../matripro/matripro';
import { LocationService } from '../../services/loc.service';

@Component({
    selector: 'page-matriloc',
    templateUrl: 'matriloc.html',
    
    providers: [ObsAuthService]
    
})
export class MatrilocPage{
    myjsondata: any;
    
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController,
        private myService: LocationService) {
        }

    selectChange(e) {
        console.log(e);
    }  
    
    public nxt(){
        this.nav.push(MatriproPage);
        
    }
    goback() {
             this.nav.pop();
}
}
<ion-header>
    <ion-navbar>
        <ion-title>Location Information</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <h1 class="h1">Location</h1>

    <ion-row>
        <ion-col>
            <ion-label>Country Living in:</ion-label>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-select  placeholder="Select">
                <ion-option [value]="sCountry" >India</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-label>Residing State:</ion-label>
        </ion-col>
        <ion-col>
            <ion-label>Residing City/District:</ion-label>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col >
            <ion-select  [(ngModel)]="sState" placeholder="Select">
                <ion-option [value]="state"></ion-option>
            </ion-select>
        </ion-col>
        <ion-col >
            <ion-select  [(ngModel)]="sDistrict" placeholder="Select">
                <ion-option [value]="districts"></ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
            <ion-col>
                <button ion-button full color="secondary" block>Save</button>
            </ion-col>
            <ion-col>
                <button (click)="nxt()" ion-button full color="primary" block>Next</button>
            </ion-col>
        </ion-row>
</ion-content>

Upvotes: 0

Views: 697

Answers (2)

Shrutika Patil
Shrutika Patil

Reputation: 565

You want to change the values of district dropdown based on the selected state. So what you have to do is first load the states on page load and assign them to states array. Whenever user changes the state, reload the districts array. So your code will be something like this:

in ts file

selectedState;
selectedDistrict;
states = [];
districts = [];

ionPageDidEnter(){
   //Load all the states and assign to states array
}

loadDistrictsForSelectedState(selectedState : StateObject){
   //write your logic to get districts from json
   districts = newArrayOfDistrictsFetchedFromJson;
}

html:

<ion-row>
        <ion-col >
            <ion-select  [(ngModel)]="selectedState" ionChange = "loadDistrictsForSelectedState(selectedState) placeholder="Select">
                <ion-option *ngFor="let state of states" [value]="state">
                    {{state.name}}
                </ion-option>
            </ion-select>
        </ion-col>
        <ion-col >
            <ion-select  [(ngModel)]="selectedDistrict" placeholder="Select">
                <ion-option *ngFor="let district of districts" [value]="district">
                   {{district.name}}
                </ion-option>
            </ion-select>
        </ion-col>
    </ion-row>

You can use the same logic for loading states based on selection of country.

Upvotes: 0

Sivaramakrishnan
Sivaramakrishnan

Reputation: 739

I have created for the states and districts. So when you click the state, the districts of the selected state will be loaded here.

Assign the states array from the json to the states. When you select the state the corresponding district of that state will be loaded. I have done this for the states and districts you can do the same way for country also.

In html

<ion-content>
    <ion-item>
      <ion-select [(ngModel)]="selectedState">
        <ion-option *ngFor="let stateObj of states" [value]="stateObj">{{stateObj.state}}</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-select [(ngModel)]="selectedDistrict">
        <ion-option *ngFor="let district of selectedState.districts" [value]="district">{{district}}</ion-option>
      </ion-select>
    </ion-item>
</ion-content>

In ts

states  = []; // Assign the states from the json file
selectedState: any = {
districts : []
};
selectedDistrict: string;

Upvotes: 1

Related Questions