onchange 下拉列表的 onchange (state, country, city)

Question

如果我在前端应用程序中有一个像州、国家/地区、城市这样的示例，并且后端有 angular 和 sql 数据。如何使一个 onchange 依赖于另一个 onchange，具有三个下拉列表？

例如在数据库上：

State   (id: 1, 2, 3 ; state  : a, b, c                   );
Country (id: 1, 2, 3 ; country: d, e, f; state_id   : 3, 2, 2);
City    (id: 1, 2, 3 ; city   : g, h, i; country_id : 1, 3, 2);
(with foreign key from country to state, and from city to country)

export class typeState {
    id: number
    state: string
}

import { typeState } from "./type-state"

export class typeCountry {
    id: number
    country: string
    state_id: typeState
}

import { typeCountry } from "./type-country"

export class typeCity {
    id: number
    city: string
    country_id: typeCountry
}

以 HTML 为例，typeState、typeCountry 和 typeCity 为 class。

<div class="container">
  <div class="title" style="text-align: center;margin-top: 30px; font-size: 30px;">
    <p><b>SELECTION</b></p>
  </div>
  <div class="card my-5">
    <div class="card-body">
      <form>
        <div class="form-group">
          <!-- STATE -->
          <label for="selection">
            <p><b>State</b></p>
          </label>
          <select value="selectt" class="form-control" id="structure" (change)="onChangeFirst($event.target.value)" name="selection">
            <option selected disabled>
              Select
            </option>
            <option [value]="i" *ngFor="let array1 of state; index as i">
              {{ array1.typeState }} 
            </option>
          </select>

          <label></label>

          <!-- COUNTRY -->
          <p><b>Country</b></p>
          <select [(ngModel)]="selectedIndex" style="margin-top: 30px;" (change)="onChangeSecond($event.target.value)" value="selection" class="form-control" id="selectt" name="selection">
            <option selected disabled>
              Select
            </option>
            <option [value]="i" *ngFor="let array2 of selectedElement; index as i">
              {{ array2.typeCountry }}
            </option>
          </select>

          <label></label>

          <!-- CITY -->
          <p><b>City</b></p>
          <select [(ngModel)]="selectedIndexTwo" style="margin-top: 30px;" value="selection" class="form-control" id="selectt" name="selection">
            <option selected disabled>
              Select
            </option>
            <option [value]="i" *ngFor="let array3 of selectedElementTwo; index as i">
              {{ array3.typeCity }}
            </option>
          </select>
        </div>
      </form>
    </div>
  </div>
</div>

如何让城市根据国家/地区在 onChangeSecond 条件下发生变化的时间读取值？（使用 selectedElementTwo = [] 和 selectedIndexTwo = number 如何 HTML）

city = City[]
country = Country[]
state = State[]

selectedElement = []
selectedIndex = number

onChangeFirst(index: number) {
    this.selectedElement = []
    this.country.forEach(t => {
      if (t.state_id.id !== undefined) {
       if (t.state_id.id === this.state[index].id) {
          this.selectedElement.push(t)
       }
      }
    })
    this.selectedIndex = 0;
    this.onChangeSecond(0);
  }

  onChangeSecond(index: number) {
-----> ?????????????????
  }

}

Answer 1

我不太确定它是否是您要找的，但试试这个 https://stackblitz.com/edit/angular-playground-sjeqbv?file=app/app.component.ts

Answer 2

这是解决方案：

onChangeSecond(index: number) {
this.selectedElementTwo = []
this.city.forEach(t => {
  if (t.country_id.id !== undefined) {
   if (t.country_id.id === this.selectedElement[index].id) {
      this.selectedElementTwo.push(t)
   }
  }
})
this.selectedIndexTwo = 0;

}

onchange 下拉列表的 onchange (state, country, city)

onchange of onchange dropdown list (state, country, city)

mysql

angular

typescript

drop-down-menu

onchange