ionic 下拉选择-选项绑定

方式一：事件绑定

.html

<ion-list>
    <ion-item>
      <ion-label class="label">职称：</ion-label>
      <ion-select placeholder="请选择您的职称" value="" okText="确定" cancelText="取消" mode="ios" [(ngModel)]="TITLE_ID"  (ngModelChange)="getCurrentValueTITLE($event)">
        <ion-select-option *ngFor="let item of TITLELIST" value="{{item.CODE}}">{{item.NAME}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label class="label">职级：</ion-label>
      <ion-select placeholder="请选择您的职级" value="" okText="确定" cancelText="取消" mode="ios" [(ngModel)]="RANK_ID"  (ngModelChange)="getCurrentValueRANK($event)" >
        <ion-select-option *ngFor="let item of RANKLIST" value="{{item.CODE}}">{{item.NAME}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label class="label">岗位：</ion-label>
      <ion-select placeholder="请选择您的岗位" value="" okText="确定" cancelText="取消" mode="ios"  [(ngModel)]="POST_ID"  (ngModelChange)="getCurrentValuePOST($event)" >
        <ion-select-option *ngFor="let item of POSTLIST" value="{{item.CODE}}">{{item.NAME}}</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>

.ts

//选择职称
  getCurrentValueTITLE(event) {
    this.TITLELIST.forEach((val, index, arr) => {
      if (val.NANE == event) {
        this.TITLE_ID = val.CODE;
      }
    });
  }

  //选择职级
  getCurrentValueRANK(event) {
    this.RANKLIST.forEach((val, index, arr) => {
      if (val.NANE == event) {
        this.RANK_ID = val.CODE;
      }
    });
  }

  //选择岗位
  getCurrentValuePOST(event) {
    this.POSTLIST.forEach((val, index, arr) => {
      if (val.NANE == event) {
        this.POST_ID = val.CODE;
      }
    });
  }

 

方式二：value值绑定

.html

<ion-list>
    <ion-item>
      <ion-label class="label">职称：</ion-label>
      <ion-select placeholder="请选择您的职称" [value]="TITLE_ID" okText="确定" cancelText="取消" mode="ios" [(ngModel)]="TITLE_ID"  >
        <ion-select-option *ngFor="let item of TITLELIST" value="{{item.CODE}}">{{item.NAME}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label class="label">职级：</ion-label>
      <ion-select placeholder="请选择您的职级" [value]="RANK_ID" okText="确定" cancelText="取消" mode="ios" [(ngModel)]="RANK_ID"  >
        <ion-select-option *ngFor="let item of RANKLIST" value="{{item.CODE}}">{{item.NAME}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label class="label">岗位：</ion-label>
      <ion-select placeholder="请选择您的岗位" [value]="POST_ID" okText="确定" cancelText="取消" mode="ios"  [(ngModel)]="POST_ID"  >
        <ion-select-option *ngFor="let item of POSTLIST" value="{{item.CODE}}">{{item.NAME}}</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>